|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
01.04.2009, 10:42 | #1 |
Пользователь
Регистрация: 13.02.2009
Сообщений: 68
|
Drag and Drop в JavaScript
Привет Народ!!!!!!!!!!!!!!!!
Помогите пожалуйста, вот код перемещение двух картинок Код HTML:
var flag=false; var id_img=""; function drag() { flag=!flag; id_img=event.srcElement.id; } function mybody.onmousemove() { if (flag) { document.all[id_img].style.top=event.clientY; document.all[id_img].style.left=event.clientX; } } function mybody.onmouseup() { flag=false; } +++++++++++++++++++++++++++++++++ <html> <head> <title>Перемещение изображение</title></head> <body id="mybody"> <script language="javascript" src="dg.js"> </script> <img id="myimg" src="my.png" ondragStart="drag()" style="position:absolute; top:10; left:10"> <img id="myimg" src="my2.png" ondragStart="drag()" style="position:absolute; top:100; left:150"> </body> </html> Форматируйте код!!! //модератор Последний раз редактировалось SkyM@n; 01.04.2009 в 10:54. |
02.04.2009, 16:46 | #2 |
Пользователь
Регистрация: 02.04.2009
Сообщений: 17
|
если я правильно понял суть проблемы - вот решение
Код HTML:
<html> <head> <title></title> </head> <body id='mybody'> <script> var flag=false; var id_img=""; function drag() { flag=!flag; id_img=event.srcElement.id; } function mybody.onmousemove() { if (flag) { document.getElementById( id_img ).style.top=event.clientY; document.getElementById( id_img ).style.left=event.clientX; if ( document.getElementById( "myimg" + String( Number( id_img.substr( 5 ) ) + 1 ) ) ) { // "myimg" + String( Number( id_img.substr( 5 ) ) + 1 - id картинки, в конце которой должна остановиться двигаемая // в данном случае следующая, т.е. если двигаем myimg1, то она встанет под myimg2 nextImg = document.getElementById( "myimg" + String( Number( id_img.substr( 5 ) ) + 1 ) ); // указатель на элемент-картинку nextImgTop = String( nextImg.style.top ).substr( 0, String( nextImg.style.top ).indexOf( 'px' ) ); // её top (обрезаем px с хвоста значения) nextAnchor = Number( nextImgTop ) + Number( nextImg.height ); // и позиция для остановки картинки, которую двигаем if ( Number( event.clientY ) >= Number( nextAnchor ) ) { // если ниже низа картинки - перестаём перетаскивать и цепляем к низу flag = false; document.getElementById( id_img ).style.top=Number( nextAnchor ); } } } } function mybody.onmouseup() { flag=false; } </script> <img id="myimg1" src="AlbumArtSmall.jpg" ondragStart="drag()" style="position:absolute; top:10; left:10"> <img id="myimg2" src="Folder.jpg" ondragStart="drag()" style="position:absolute; top:100; left:150"> </body> </html> |
Опции темы | Поиск в этой теме |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Drag and Drop в JavaScript | Ruska882009 | JavaScript, Ajax | 4 | 29.08.2009 23:39 |
Drag and Drop | Xardas | Общие вопросы Delphi | 8 | 20.01.2008 23:09 |