EOMY.NET
Хостинг EOMY.NET: Форум поддержки
 
 FAQFAQ   ПоискПоиск   ПользователиПользователи   ГруппыГруппы   РегистрацияРегистрация 
 ПрофильПрофиль   Войти и проверить личные сообщенияВойти и проверить личные сообщения   ВходВход 
RSS Feed  

диалоговое окно на JS

 
Начать новую тему   Ответить на тему    Список форумов EOMY.NET -> JavaScript, AJAX
диалоговое окно на JS
Автор Сообщение
noLove
Два пингвина
Два пингвина


Зарегистрирован: 25.04.2007
Сообщения: 352

18122 Монеты

СообщениеДобавлено: Ср, 02 Июл, 2008 19:57    Заголовок сообщения: диалоговое окно на JS Ответить с цитатой

собственно, когда заходишь в cpanel, выскакивает окошко, там предлагают показать видеокурс как использовать цпанель.. вот мне интересно, как сделать такое же диалоговое окошко с возможностью перетаскивания....

Если можно - самый примитивный пример покажите пожалуйста? никак не могу додуматься... и найти ничего более менее компактного и понятного тоже не получилось Sad
_________________
Друзья, уважайте труд других Wink
http://xternalx.com - моя хомпага
Вернуться к началу
Посмотреть профиль Отправить личное сообщение
AlfaUngzipper
Два пингвина
Два пингвина


Зарегистрирован: 23.02.2007
Сообщения: 370
Откуда: Halle (Saale)
4 Монеты

СообщениеДобавлено: Ср, 02 Июл, 2008 20:07    Заголовок сообщения: Ответить с цитатой

http://alfaungzipper.narod.ru/ajax/

Что-то типа вроде. Естественно заимствовал и плевать хотел как оно работает это перемещение. Laughing
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Посетить сайт автора
noLove
Два пингвина
Два пингвина


Зарегистрирован: 25.04.2007
Сообщения: 352

18122 Монеты

СообщениеДобавлено: Ср, 02 Июл, 2008 20:59    Заголовок сообщения: Ответить с цитатой

в опере 9.26 не работает -)
_________________
Друзья, уважайте труд других Wink
http://xternalx.com - моя хомпага
Вернуться к началу
Посмотреть профиль Отправить личное сообщение
Alek$
11 1110 1000
11 1110 1000


Зарегистрирован: 24.11.2007
Сообщения: 1140
Откуда: Новосибирск
26958 Монеты

СообщениеДобавлено: Чт, 03 Июл, 2008 09:19    Заголовок сообщения: Ответить с цитатой

noLove
есть куча готовых JS фреймворков, которые такое реализуют Smile Недавно вот накопал такую библиотечку, думаю вам подойдет.
http://vikjavev.no/highslide/
_________________
Самая страшная ошибка - это ошибка без видимых причин и конкретных последствий.
phpBB3 [db_update.php generator]
phpBB3 [Russian]
Антисоциальный блог
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Посетить сайт автора
Alek$
11 1110 1000
11 1110 1000


Зарегистрирован: 24.11.2007
Сообщения: 1140
Откуда: Новосибирск
26958 Монеты

СообщениеДобавлено: Чт, 03 Июл, 2008 17:03    Заголовок сообщения: Ответить с цитатой

Кстати, вот еще один скрипт:
http://orangoo.com/labs/GreyBox/
_________________
Самая страшная ошибка - это ошибка без видимых причин и конкретных последствий.
phpBB3 [db_update.php generator]
phpBB3 [Russian]
Антисоциальный блог
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Посетить сайт автора
madhamster
Согнул ложку
Согнул ложку


Зарегистрирован: 09.10.2006
Сообщения: 902

460 Монеты

СообщениеДобавлено: Пт, 04 Июл, 2008 00:05    Заголовок сообщения: Ответить с цитатой

Сам написал, работает в ИЕ и Опере. на элементах DIV и IMG на таблицах и остальном каряво...

Я понмаю никому не нужно, но малоли кому интересна идея, а не сам код Smile

Код:

<!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    Заголовок сообщения: Ответить с цитатой

Задача не такая и тривиальная, и простые библиотечки тут могут не подойти. Сам в течении полугода маялся с этой проблемой, ибо идеально подогнать под все браузеры и под все доктайпы (а второе как оказалось значительно сложнее) довольно проблематично. Плюс почти наразрешимая проблема перетаскивания слоев по фреймам или таблицам , когда браузеры начинают выделять область перетаскивания(выглядит как конкретный баг)..
_________________
сайт знакомств Забудь про фразу "Мне не с кем". Всегда есть с кем!
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Отправить e-mail
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;
   }

_________________
Друзья, уважайте труд других Wink
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>


В ИЕ и Опере багов нету. Если кто знает как побороть ФФ помогите добить скрипт... Я хочу спать уже нормально Rolling Eyes
_________________
NextStage - live music competition
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Посетить сайт автора
Показать сообщения:   
Начать новую тему   Ответить на тему    Список форумов EOMY.NET -> JavaScript, AJAX Часовой пояс: GMT
Страница 1 из 1

 


Rambler's Top100   Рейтинг@Mail.ru    



Powered by phpBB © 2001, 2005 phpBB Group