вот код , может тут понятней будет
var _shift = {}; //смещение мыши относительно элемента по X и по Y
var drag_prop = {};//свойства перемещаемого обьекта
var drag = {
status: false,
init:function(){
var elem_for_drag, i, n;
elem_for_drag = querySelector.All('draggable');
i = elem_for_drag.length;
while(i--){
n = elem_for_drag[i];
Event.addListener(n, "mousedown", drag.down_mouse, false);
Event.addListener(n, "dragstart", drag.drag_s, false);
}
},
down_mouse: function (e) {
action.down.call(this,e);
},
drag_s: function (e){
if(e.preventDefault){
e.preventDefault();
} else{
event.returnValue = false
};
}
};
var _avatar = {
create: function(elem){
var width, height, avatar;
avatar = document.createElement("div");
avatar.style.width = elem.offsetWidth + "px";
avatar.style.height = elem.offsetHeight + "px";
avatar.className = "avatar";
document.body.appendChild(avatar);
return avatar;
}
};
var drop = {
lastElem: false,
state_original: false,
end : false
};
var action = {
count: 0 ,
auto: false,
down : function(evt){
var target, e;
e = evt || event;
which = e.which || e.button;
target = e.target || e.srcElement;
if(which != 1) return false;
drag.obj = this || target;
drag_prop.pageX = mouse.pageX(e);
drag_prop.pageY = mouse.pageY(e);
drag_prop.posX = Obj.positX(drag.obj);
drag_prop.posY = Obj.positY(drag.obj);
_shift.X = drag_prop.pageX - drag_prop.posX;
_shift.Y = drag_prop.pageY - drag_prop.posY;
Event.addListener(document,"mousemove",action.move_wrap,false);
Event.addListener(document,"mouseup",action.up,false);
},
move_wrap: function (e){
setTimeout(function(){
action.move(e);
},20);
},
move: function (e){
var shift_elX, shift_elY, avatar, target;
var pageX, pageY, drop_el;
pageX = mouse.pageX(e);
pageY = mouse.pageY(e);
if(!drag.status) {
shift_elX = pageX - _shift.X - drag_prop.posX;
shift_elY = pageY - _shift.Y - drag_prop.posY;
if(Math.abs(shift_elY) < 3 || Math.abs(shift_elX) < 3)return;
drag.avatar = _avatar.create(drag.obj);
cls.addClass(drag.obj, "drag_obj");
drag.status = true;
}
if(param.move_drop){
drag.avatar.style.display = "none";
drop_el = action.serchAttr_drop(pageX, pageY);
if(drop_el){
move_drop.call(drop_el, drag.avatar);//функция измений drop блока , когда элементы над ним
drop.lastElem = drop_el ;
drop.state_original = true;
}
if(!drop_el && drop.state_original){
drop_out.call(drop.lastElem, drag.avatar);//функция отката измений после ухода курсора с drop блока
drop.state_original = false;
}
drag.avatar.style.display = '';
}
drag.avatar.style.left = pageX - _shift.X +"px";
drag.avatar.style.top = pageY - _shift.Y +"px";
},
up : function(evt){
var last_posX, last_posY, drop_elem, span, e;
if(drag.avatar){
e = evt || event;
Event.removeListener(document,"mousemove", action.move_wrap,false);
Event.removeListener(document,"mouseup", action.move,false);
if(drop.lastElem){
drop_out.call(drop.lastElem, drag.avatar);
}
cls.removeClass(drag.obj, "drag_obj");
last_posX = e.clientX;
last_posY = e.clientY;
console.log(drag.avatar);
drag.avatar.parentNode.removeChild(drag.avatar);
drag.avatar = false;
drag.status = false;
drop_elem = action.serchAttr_drop(last_posX,last_posY);
if(drop_elem){
action.count++;
elemnt_drop.call(drag.obj, drop_elem);
if(action.auto != "stop" && param.auto_size) action.width_height(drop_elem);
}
}
},
width_height:function( drop_elem){
var width_drop, height_drop, height, width, height_drag, width_drag;
width_drop = drop_elem.offsetWidth;
height_drop = drop_elem.offsetHeight;
width_drag = drag.obj.offsetWidth + parseInt(getComputed(drag.obj).marginLeft);
width_drag += parseInt(getComputed(drag.obj).marginRight);
height_drag = drag.obj.offsetHeight + parseInt(getComputed(drag.obj).marginTop);
height_drag += parseInt(getComputed(drag.obj).marginBottom);
width = width_drop - width_drag * action.count;
height = height_drop - height_drag ;
if( width_drag > width_drop){
drop_elem.style.width = width_drag+"px";
}
if(width < width_drag && height < height_drag) action.auto = true;
if(action.auto){
drop_elem.style.height = "auto";
action.auto = "stop";
}
},
serchAttr_drop: function(x,y){
var drop_elem = document.elementFromPoint(x, y);
while(drop_elem != document && drop_elem.getAttribute("droppable") == null){
drop_elem = drop_elem.parentNode;
}
return drop_elem === document ? null : drop_elem;
}
};