Question

I have some specific situation this:

picture shows it very good. So I’m developing following actions:

• Sortable Div has method .sortable() on itself. And sortable Items sorts well.
• DroppableDiv has method .droppable() on itself. And DragItems has method .draggable() on theirself.

My issue

What I want to do is to handle sortable item on which was dropped DragItem from Container.

In this example I’m drag & drop DragItem 2 to Sortable Item 2. And I need to handle Sortable Item 2 within DroppableDiv.droppable({drop : function(event, ui) {}});.

I’ve searched event and ui object but I haven’t find solution there.

Also sorry I haven’t give anny fiddle but I have problem with create working example in jsfiddle/jsBin.

Any help would be appreciated.

Answer 1

In this case I have wrote my own function:

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;
}

Which was called from:

    $("#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);
            }
        }
    });