I have a problem with jQuery UI's drag and drop. I create dynamically new elements which are placed on the screen in one of four areas. These elements are draggable and I can place them all over the screen. But I want that these elements can only be dropped on one of the three areas.

I created a full working example here: /

By clicking the text in the red bordered area, a new element is created and placed in the green area drop1. This element should now only be droppable to one of the green areas (drop1, drop2 or drop3), nowhere else. How can I do this?

Best Regards, Tim.

I have a problem with jQuery UI's drag and drop. I create dynamically new elements which are placed on the screen in one of four areas. These elements are draggable and I can place them all over the screen. But I want that these elements can only be dropped on one of the three areas.

I created a full working example here: http://jsbin./enusu4/

By clicking the text in the red bordered area, a new element is created and placed in the green area drop1. This element should now only be droppable to one of the green areas (drop1, drop2 or drop3), nowhere else. How can I do this?

Best Regards, Tim.

• javascript
• jquery
• jquery-ui

2 Answers 2

I've answered a similar question here, with some modifications it could do what you want:
Javascript:

$(function() {
    $('.drag').draggable({
        revert: "invalid",
        scope: "items"
    });
    $('#droppable').droppable({
        scope: "items",
        // if you want to disable the dragging after drop un-ment this
/*
        drop: function(e, ui) {
            $(ui.draggable).draggable({"disabled":true});
        }
        */
    });
    $('#droppable2').droppable();
    $(':button').click(function() {
        var $box = $('<div class="drag">Drag me</div>');
        $('#cont').append($box);
        $box.draggable({
            revert: "invalid",
            scope: "items"
        });
    });
});

HTML:

<div><button type="button">Add box</button></div>
<div id="droppable">Drop here</div>
<div id="droppable2">Out of scope!</div>
<div class="clear"></div>
<div id="cont">
    <div id="draggable" class="drag">Drag me</div>
    <div id="draggable2" class="drag">Drag me</div>
</div>

Example Link

EDIT: Okay, here's an update:
Javascript:

$(function() {
    var dragOptions = {
        revert: "invalid",
        scope: "items",
        helper: "clone"
    }
    $('.drag').draggable(dragOptions);
    $('.droppable').droppable({
        scope: "items",
        drop: function(e, ui) {
            var $drop = $(this);
            $(ui.draggable).draggable({
                "disabled": true
            }).appendTo($drop);
        }

    });
    $('#droppable2').droppable();

    $(':button').click(function() {
        var $box = $('<div class="drag">Drag me</div>');
        $('#cont').append($box);
        $box.draggable(dragOptions);
    });
});

HTML:

<div><button type="button">Add box</button></div>
<div style="float: left;"><h3>Drop here:</h3>
    <div class="drop1 droppable"></div>
</div>
<div style="float: left;"><h3>Drop here:</h3>
    <div class="drop2 droppable"></div>
</div>
<div style="float: left;"><h3>Out of scope!</h3>
    <div id="droppable2"></div>
</div>
<div class="clear"></div>
<div id="cont">
    <div class="drag">Drag me</div>
    <div class="drag">Drag me</div>
</div>

Example Link 2

$("#dropable").droppable({
   hoverClass: "ui-state-hover",
   drop: function (event, ui) {
       if ( $('.ui-state-hover').size() > 0){return false;}
       //TODO
   }
}