Mój skrypt d&d
core.DnD_is_drop_class = function (name)
{
if(name.substr(0, 1) == '.')
{
var drop = [];
var i = 0;
$(name).each(function(index)
{
drop[i] =
{
id: this,
offset: $(this).offset(),
width: $(this).width(),
height: $(this).height()
};
i++;
});
return drop;
}
return false;
};
core.DnD = function(obj)
{
/************************* FUNCTION START DRAG **************************/
$(obj.drag).mousedown(function()
{
core.onDrag = this;
$(this).css({'position':'absolute', 'z-index':100});
if(typeof(obj.drop) == 'object')
{
core.drop = [];
for(i/* */in/* */obj.drop) /* for in */
{
var temp = core.DnD_is_drop_class(obj.drop[i]);
if(temp !== false)
{
core.drop = array_merge(core.drop, temp);
}
else
{
core.drop.push(obj.drop[i]);
}
}
}
/************************ FUNCTION MOVE *************************/
$(document).mousemove(function(e)
{
if(core.onDrag !== false)
{
$(core.onDrag).css({'top':e.pageY + 'px', 'left':e.pageX + 'px'});
}
});
/************************ FUNCTION DROP *************************/
$(document).mouseup(function (e)
{
if(core.onDrag !== false)
{
if(typeof(core.drop) == 'object')
{
for(i/* */in/* */core.drop) /* for in */
{
if(e.pageX >= core.drop[i].offset.left && e.pageX <= core.drop[i].offset.left + core.drop[i].width && e.pageY >= core.drop[i].offset.top && e.pageY <= core.drop[i].offset.top + core.drop[i].height)
{
var drag_width = $(core.onDrag).width();
var drag_height = $(core.onDrag).height();
$(core.onDrag).css({'position':'absolute', 'top':core.drop[i].offset.top+((core.drop[i].height/2)-(drag_height/2)), 'left':core.drop[i].offset.left+((core.drop[i].width/2)-(drag_width/2))});
obj.onSuccess(core.onDrag, core.drop[i].id);
break;
}
else
{
$(core.onDrag).css({'position':'relative', 'top':'0px', 'left':'0px'});
}
}
}
else
{
var drop = $(obj.drop).offset();
var drop_width = $(obj.drop).width();
var drop_height = $(obj.drop).height();
if(e.pageX >= drop.left && e.pageX <= drop.left + drop_width && e.pageY >= drop.top && e.pageY <= drop.top + drop_height)
{
var drag_width = $(core.onDrag).width();
var drag_height = $(core.onDrag).height();
$(core.onDrag).css({'position':'absolute', 'top':drop.top+((drop_height/2)-(drag_height/2)), 'left':drop.left+((drop_width/2)-(drag_width/2))});
obj.onSuccess(core.onDrag, $(obj.drop));
}
else
{
$(core.onDrag).css({'position':'relative', 'top':'0px', 'left':'0px'});
}
}
core.onDrag = false;
}
});
$(document).mousemove();
});
};
w elemencie td d&d działa jak powinno czyli tak jakby się pozycjonował element drag względem body, ale w elemencie div tak jakby się pozycjonowało "relative" do tego elementu więc pozycja 0 na 0 mi daje to że element drag jest na połowie strony, pewnie to jest wina tego, że pozycjonowanie absolutne działa tak w div'ach, ale nie mam pomysłu jak by to zrobić żeby dobrze działało i chciałbym to zrobić bez konieczności dodania elementu drag do body.