Javascript.RU

Drag and Drop

Посмотреть в действии

<img src='40x40.png' style='position:absolute;left:100;top:100;' id=img>

<script>
elemX=0;// Глобальная координата x нажатия мыши относительно элемента
elemY=0;// Глобальная координата y нажатия мыши относительно элемента
drag=false;// Глобальная переменная, разрешающая или запрещающая перемещение элемента
function $$(id)
{
return document.getElementById(id);
}
$$('img').onmousedown = function(e){
			   e = e || window.event;
			  elemX=e.clientX+document.body.scrollLeft-parseInt($$('img').style.left);
			  elemY=e.clientY+document.body.scrollTop-parseInt($$('img').style.top);
			  drag=true;
                          }
$$('img').ondragstart = function() {return false;}
document.onmouseup = function() {drag=false;}
document.onmousemove = function(e) {
			e = e || window.event;
			elx=parseInt(e.clientX)-elemX;
			ely=parseInt(e.clientY)-elemY;
			if(drag){
			$$('img').style.left=e.clientX+document.body.scrollLeft-elemX;
			$$('img').style.top=e.clientY+document.body.scrollTop-elemY;
			}
			
			}
</script>
Прикрепленный файлРазмер
40x40.png251 байт
+5

Автор: maxboar (не зарегистрирован), дата: 19 февраля, 2010 - 02:45
#permalink

Простой и классический код, спасибо.

Только строчки
21 elx=parseInt(e.clientX)-elemX;
22 ely=parseInt(e.clientY)-elemY;
в обработчике onmousemove кажутся лишними (по крайней мере для этого примера, я не знаю в каком проекте это у вас используется)

Я бы ещё оформил присвоение 4х event-хендлеров в виде отдельной функции от ID элемента (или объекта - кому как нравится)

Нечто вроде

function moveable(id)
{
  var elemX=0;
  var elemY=0;
  var drag=false;
  var elem=$$(id);
  elem.onmousedown = function(e){
               e = e || window.event;
              elemX=e.clientX+document.body.scrollLeft-parseInt(elem.style.left);
              elemY=e.clientY+document.body.scrollTop-parseInt(elem.style.top);
              drag=true;
                          }
  elem.ondragstart = function() {return false;}
  document.onmouseup = function() {drag=false;}
  document.onmousemove = function(e) {
            if(drag){
              e = e || window.event;
              elem.style.left=e.clientX+document.body.scrollLeft-elemX;
              elem.style.top=e.clientY+document.body.scrollTop-elemY;
            }             
            }
}

//а дальше
var moveableImg = new moveable('img');

И в глобальном контексте сидит только экземпляр класса и его описание.


Автор: maxboar (не зарегистрирован), дата: 19 февраля, 2010 - 02:56
#permalink

да но этот объект работать нормально будет только с одним элементом.
Если нужно двигать несколько элементов, то нужно chain'ить хендлеры на document.
Либо в onmouseover двигаемого объекта добавить перезапись хендлеров document'а

elem.onmouseover = function(){
  document.onmouseup = function() {drag=false;}
  document.onmousemove = function(e) {
            if(drag){
              e = e || window.event;
              elem.style.left=e.clientX+document.body.scrollLeft-elemX;
              elem.style.top=e.clientY+document.body.scrollTop-elemY;
            }            
            }
  }

Автор: goldserg, дата: 26 апреля, 2010 - 15:27
#permalink

Много видел я DD, но большинство из них приведено как здесь кротким и простым кодом. А чаще всего требуется чтобы что-то происходило после дропа.

1) Поэтому в свой код ввел дополнительные параметры которые надо иметь ввиду:
- dropZones - Коллекция DOMObject, куда можно опустить элемент
- onDragStart
- onDragEnd
- onDrop
функции которые становятся атрибутами DOMObject для которого инициализируется DD
- dragBar - DOMObject - область за которую можно объект "поднять"
- ghost - объект являющийся клоном перетаскиваемого объекта, с его высотой и шириной, указывает куда может быть "опущен" в данный момент объект.

2) Не стоит забывать про поправки скролинга, здесь учтены только поправки глобального скролинга страницы, но может быть в дизайне реализован внутренний скролинг, в слое.

Жду критики в свой адрес


 
Поиск по сайту
Другие записи этого автора
mycoding
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние темы на форуме
Forum