|
диалоговое окно на JS
|
| Автор |
Сообщение |
noLove
Два пингвина
Зарегистрирован: 25.04.2007
Сообщения: 352
18122 
|
 Добавлено: Ср, 02 Июл, 2008 19:57 Заголовок сообщения: диалоговое окно на JS |
 |
|
собственно, когда заходишь в cpanel, выскакивает окошко, там предлагают показать видеокурс как использовать цпанель.. вот мне интересно, как сделать такое же диалоговое окошко с возможностью перетаскивания....
Если можно - самый примитивный пример покажите пожалуйста? никак не могу додуматься... и найти ничего более менее компактного и понятного тоже не получилось 
_________________
Друзья, уважайте труд других 
http://xternalx.com - моя хомпага
 |
|
| Вернуться к началу |
|
 |
AlfaUngzipper
Два пингвина
Зарегистрирован: 23.02.2007
Сообщения: 370
Откуда: Halle (Saale)
4
|
| Добавлено: Ср, 02 Июл, 2008 20:07 Заголовок сообщения: |
|
|
http://alfaungzipper.narod.ru/ajax/
Что-то типа вроде. Естественно заимствовал и плевать хотел как оно работает это перемещение.  |
|
| Вернуться к началу |
|
|
noLove
Два пингвина
Зарегистрирован: 25.04.2007
Сообщения: 352
18122
|
| Добавлено: Ср, 02 Июл, 2008 20:59 Заголовок сообщения: |
|
|
в опере 9.26 не работает -)
_________________
Друзья, уважайте труд других
http://xternalx.com - моя хомпага
|
|
| Вернуться к началу |
|
|
Alek$
11 1110 1000
Зарегистрирован: 24.11.2007
Сообщения: 1140
Откуда: Новосибирск
26958
|
|
| Вернуться к началу |
|
|
Alek$
11 1110 1000
Зарегистрирован: 24.11.2007
Сообщения: 1140
Откуда: Новосибирск
26958
|
|
| Вернуться к началу |
|
|
madhamster
Согнул ложку
Зарегистрирован: 09.10.2006
Сообщения: 902
460
|
| Добавлено: Пт, 04 Июл, 2008 00:05 Заголовок сообщения: |
|
|
Сам написал, работает в ИЕ и Опере. на элементах DIV и IMG на таблицах и остальном каряво...
Я понмаю никому не нужно, но малоли кому интересна идея, а не сам код 
| Код: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Drag n Drop</title>
<script type="text/javascript">
var mouseX;
var mouseY;
var tmp;
function drag(obj){
mouseX = event.clientX - obj.offsetLeft;
mouseY = event.clientY - obj.offsetTop;
tmp = obj;
obj.style.position = 'absolute';
if(navigator.appName == 'Opera'){
document.onmousemove = move;
}else{
if(obj.nodeName == 'IMG'){
obj.ondrag = move;
}else{
document.onmousemove = move;
}
}
obj.onmouseup = function(){
document.onmousemove = function(){}
}
}
function move(){
tmp.style.left = event.clientX - mouseX;
tmp.style.top = event.clientY - mouseY;
}
</script>
</head>
<body>
<img src="pic.jpg" id="pic" onmousedown="drag(this);">
<div style="width: 100px; height: 100px; background: red;" onmousedown="drag(this);"></div>
</body>
</html>
|
_________________
NextStage - live music competition |
|
| Вернуться к началу |
|
|
антон888
Два пингвина
Зарегистрирован: 05.11.2007
Сообщения: 311
13445
|
| Добавлено: Вс, 06 Июл, 2008 10:18 Заголовок сообщения: |
|
|
Задача не такая и тривиальная, и простые библиотечки тут могут не подойти. Сам в течении полугода маялся с этой проблемой, ибо идеально подогнать под все браузеры и под все доктайпы (а второе как оказалось значительно сложнее) довольно проблематично. Плюс почти наразрешимая проблема перетаскивания слоев по фреймам или таблицам , когда браузеры начинают выделять область перетаскивания(выглядит как конкретный баг)..
_________________
сайт знакомств Забудь про фразу "Мне не с кем". Всегда есть с кем! |
|
| Вернуться к началу |
|
|
noLove
Два пингвина
Зарегистрирован: 25.04.2007
Сообщения: 352
18122
|
| Добавлено: Пн, 07 Июл, 2008 06:06 Заголовок сообщения: |
|
|
вот мой вариант перетаскивания. я его не писал, только добавил некоторые возможности, как например, определение, какое окошко выделено, а так же активизация окна по клику. работает в ие, опере и огнелисе:
| Код: | var savedTarget=null; // The target layer (effectively vidPane)
var orgCursor=null; // The original mouse style so we can restore it
var dragOK=false; // True if we're allowed to move the element under mouse
var dragXoffset=0; // How much we've moved the element on the horozontal
var dragYoffset=0; // How much we've moved the element on the verticle
var zindex=1;
function moveHandler(e){
if (e == null) { e = window.event }
if (e.button<=1&&dragOK){
savedTarget.style.left=e.clientX-dragXoffset+'px';
savedTarget.style.top=e.clientY-dragYoffset+'px';
return false;
}
}
function cleanup(e) {
document.onmousemove=null;
document.onmouseup=null;
savedTarget.style.cursor=orgCursor;
dragOK=false;
}
function dragStart(e,obj){
var htype='-moz-grabbing';
if (e == null) { e = window.event; htype='move';}
target=document.getElementById(obj);
target.focus();
zindex++;
target.style.zIndex = zindex;
savedTarget=target;
target.style.cursor=htype;
dragOK=true;
dragXoffset=e.clientX-parseInt(target.style.left);
dragYoffset=e.clientY-parseInt(target.style.top);
document.onmousemove=moveHandler;
document.onmouseup=cleanup;
return false;
} |
_________________
Друзья, уважайте труд других
http://xternalx.com - моя хомпага
|
|
| Вернуться к началу |
|
|
madhamster
Согнул ложку
Зарегистрирован: 09.10.2006
Сообщения: 902
460
|
| Добавлено: Сб, 02 Авг, 2008 21:07 Заголовок сообщения: |
|
|
А я всёравно не успакоюсь пока сам не напишу...
| Код: |
<script type="text/javascript">
var tmp = false;
function drag(obj, event){
obj.style.position = 'absolute';
var posX = event.clientX - obj.offsetLeft;
var posY = event.clientY - obj.offsetTop;
if(tmp) tmp.style.zIndex = 0;
obj.style.zIndex = 1;
document.onmousemove = function(event){
event = event || window.event;
obj.style.left = event.clientX - posX;
obj.style.top = event.clientY - posY;
}
obj.onmouseup = function(){
document.onmousemove = null;
tmp = obj;
}
obj.ondragstart = function(){
window.event.returnValue = false;
}
}
</script>
|
Работает в IE 7,8 Opera 9, FF 3.
Првавда в FF есть баг при переносе картинки она каряво двигается, однако если её засунуть в див как БГшку двигается норм, и ещё что касается ФФ, DIV должен содержать хотябы 1 пробел чтобы он двигался норм, другими словами DIV не должен быть путсым.
Используется типа
| Код: | | <div style="background: lime; position: absolute; cursor: move; width: 100px; height: 100px;" onmousedown="drag(this, event);">TEST</div> |
В ИЕ и Опере багов нету. Если кто знает как побороть ФФ помогите добить скрипт... Я хочу спать уже нормально 
_________________
NextStage - live music competition |
|
| Вернуться к началу |
|
|
|
FAQ
Поиск
Пользователи
Группы
Регистрация
Профиль
Войти и проверить личные сообщения
Вход
