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

Только строчки
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');

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

да но этот объект работать нормально будет только с одним элементом.
Если нужно двигать несколько элементов, то нужно 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;
            }            
            }
  }

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

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

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

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

Roksa polska

Roksa fb