我有一个使用draggable和droppable的项目列表。它包含可以移动到可放置文件夹中的项目。您还可以更改以不同顺序拖放它们的项目的顺序。但精度不高。因此,当前的容差选项不会像我想要的那样工作。
正如标题所说;我希望drop能够在最接近可拖动中间的droppable中间。这也意味着每次下落只能有一个下落区域。我如何才能实现这一目标?
以下是代码的可删除部分:
// Handle
base.$el.find(base.options.handle).droppable(
{
tolerance : "intersect"
, hoverClass : "tree_hover"
, drop : function(event, ui)
{
//console.log(pos.target(), pos.section());
base.pos.targetX = ui.offset.left;
base.pos.targetY = $(this).offset().top;
base.pos.targetH = $(this).height();
$(this).removeClass('tree_hover');
var dropped = ui.draggable;
dropped.css({ top: 0, left: 0 });
var me = $(this).parent();
if (me == dropped)
return;
ui.draggable.addClass('moved');
var subbranch = me.children("ul");
switch (base.pos.target())
{
case 'on':
//add as a child
if (subbranch.size() == 0)
{
//add new ul
var newb = $('<ul></ul>');
newb.append(dropped);
me.append(newb);
} else {
subbranch.eq(0).append(dropped);
}
if (!me.hasClass('parent')) me.addClass('parent expanded');
break;
case 'above':
//add before
dropped.insertBefore(me);
break;
case 'below':
//add after
dropped.insertAfter(me);
break;
}
me.removeClass('on above below');
//remove parent from items that no longer contain children
$('ul.tree li.parent ul').filter(function()
{
return $(this).children().length == 0;
}).closest('li').removeClass('parent').end().remove();
//callback
if (base.options.itemMoved != null)
{
base.options.itemMoved(base.getMoved());
}
}, over: function(e, ui)
{
base.pos.targetX = ui.offset.left;
base.pos.targetY = $(this).offset().top;
base.pos.targetH = $(this).height();
}, out: function(e, ui)
{
$(this).closest('li').removeClass('on above below');
}
});