容差:对于最接近可拖动中间位置的可放置中间位置?

时间:2013-07-12 15:18:52

标签: jquery jquery-ui draggable jquery-ui-sortable droppable

我有一个使用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');
                }
            });

0 个答案:

没有答案