如何在drop上处理droppable元素的子元素？

Question

我有一些具体情况： 图片显示它非常好。所以我正在开发以下行动：

• Sortable Div本身有方法.sortable()。并且可排序的项目排序很好。
• DroppableDiv本身有方法.droppable()。而且DragItems在自己身上有方法.draggable()。

我的问题

我想要做的是处理从Container中删除DragItem的可排序项目。

在这个例子中，我是拖累和放大将DragItem 2放到Sortable Item 2。我需要在Sortable Item 2内处理DroppableDiv.droppable({drop : function(event, ui) {}});。

我搜索了event和ui对象，但我找不到解决方案。

也很抱歉我没有给小提琴，但我在jsfiddle / jsBin中创建工作示例时遇到问题。

任何帮助都将不胜感激。

Answer 1

在这种情况下，我编写了自己的函数：

function findPosition(position) {
    var container = $("#DroppableDiv");
    var sortableItems = container.find("li");
    var searchedItem = null;

    for (var i = 0; i < sortableItems.length; i++) {
        var item = sortableItems.eq(i);
        var itemPosition = item.position();
        var itemWidth = item.css('width');
        var itemHeight = item.css('length');

        if (position.left < parseFloat(widgetPosition.left) + (parseFloat(widgetWidth) * 0.75) && position.top < parseFloat(widgetPosition.top) + (parseFloat(widgetHeight) * 0.75)) {
            searchedItem = widget;
            break;
        }
    }

    return searchedItem;
}

来自：

    $("#DroppableDiv").droppable({
        accept: 'li',
        drop: function (event, ui) {
            //here is little trick for check is event comes from drag or sort(only in my case)
            if (ui.draggable.context.childElementCount === 0) {
                var newWidgetPosition = findPosition(ui.position);
            }
        }
    });