JQuery drag & drop problem

Question

See the code here on jsbin. I am basically trying to create a series of radio buttons. Each filled red square can be dragged up and down. The red outlines below are the drop zones. When the square is dragged along the fall zone, which has the right to accept it, the fall zone should be pink.

There are two problems with this code. One of them is that, although the movement of the switches is limited by the y axis, they can still be dropped to any dropout zone. Click and drag the switch and slide it in the bottom row, and you will see that the reset zones turn pink, although the switch remains in place.

This leads to a second problem. To solve this problem, I tried to use the area option in which groups are dragged and dropped. You can only drag to a drop zone with the same area. In the above example, lines that add scope are commented out. The volume of each drag is "Default."

If you uncomment these two lines (click the tab in the upper right corner, if you are new to jsbin, then click “Preview after change”), you will see that instead of restricting each drag to one drop zone, they can no longer prolonged fall in any dropout zone. The callback function never works.

For convenience, here is a part of the javascript example:

$(document).ready( function() {
    var draggables = $('div.dragMe'),
    droppables = $('div.dropMe');

    draggables.draggable(
    {
        axis: 'y',
        containment: 'parent'
    });

    droppables.droppable(
    {
        hoverClass: 'dropped',
        drop: dropCallBack
    });

    draggables.each(function(index) {
        //$(this).draggable('option', 'scope', ''+index);
        //droppables.eq(index).droppable('option', 'scope', ''+index);

        $(this).text( $(this).draggable('option', 'scope') )
        droppables.eq(index).text( droppables.eq(index).droppable('option', 'scope') );
    });

    function dropCallBack(e, ui) {
        alert('Dropped!');
    }
});

Answer 1

jQuery scope droppable . jQuery ( S), . droppable, jQuery scope , droppable, , S[scope]. , droppable, , , .

, .droppable('option', 'scope', ...) S . ( ) ( jQuery ..), "" .droppable('option', 'scope').

, , , , googled ("jquery droppable scope option"), , , . , , , , . $.ui.ddmanager.droppables - , S.

jQuery.fn.extend({

    setDroppableScope: function(scope) {
        return this.each(function() {
            var currentScope = $(this).droppable("option","scope");
            if (typeof currentScope == "object" && currentScope[0] == this) return true; //continue if this is not droppable

            //Remove from current scope and add to new scope
            var i, droppableArrayObject;
            for(i = 0; i < $.ui.ddmanager.droppables[currentScope].length; i++) {
                var ui_element = $.ui.ddmanager.droppables[currentScope][i].element[0];

                if (this == ui_element) {
                    //Remove from old scope position in jQuery internal array
                    droppableArrayObject = $.ui.ddmanager.droppables[currentScope].splice(i,1)[0];
                    //Add to new scope
                    $.ui.ddmanager.droppables[scope] = $.ui.ddmanager.droppables[scope] || [];
                    $.ui.ddmanager.droppables[scope].push(droppableArrayObject);
                    //Update the original way via jQuery
                    $(this).droppable("option","scope",scope);
                    break;
                }
            }
        });
    }
});

draggables.each(function(index) {
    $(this).draggable('option', 'scope', ''+index);
    droppables.eq(index).setDroppableScope(''+index);

    $(this).text( $(this).draggable('option', 'scope') )
    droppables.eq(index).text( droppables.eq(index).droppable('option', 'scope') );
});

Here updated jsbin