CODEWITHSUNDEEP
jqueryhtmljquery-uidrag-and-drop
andre de waard
andre de waard

Reputation: 164

make draggable,droppable div not draggable when other div is dropped inside

i have a view which shows reservations and tables as div's. The tables are draggable and droppable the reservations are only draggable. I want to drag a table to the position you want and than drag a reservation on it. When the reservation is dropped on it the table needs to be not draggable anymore. This is my code now:

<script>
$(".draggable").draggable({
    snap: ".draggable",
    snapMode: "outer",
    stop: function (event, ui) {
        var finalxPos = $(this).css("left").replace("px", "");
        var finalyPos = $(this).css("top").replace("px", "");
        var itemId = $(this).attr('id');
        var posXid = "posX" + itemId;
        var posYid = "posY" + itemId;
        $('input:text[id="' + posXid + '"]').attr("value", finalxPos);
        $('input:text[id="' + posYid + '"]').attr("value", finalyPos);
        },
}).droppable({
    drop: function(event, ui) {
        $(this).draggable({ disabled: true });
    },
    out: function(ev, ui) {
        $(this).draggable({ disabled: false });
    }
});

    $(".draggableres").draggable({
        snap: ".draggable",
        snapMode: "inner"
    });
</script>

and my view:

<div id="tablewrapper">
   <div class="draggableres reservation">reservation 1</div>

   <div class="draggable table ui-widget-content">
   </div>
</div>

As i run it now and i drop a reservation the reservation stops being draggable instead of the table. it is in a loop so 

$(".draggable").draggable({disabled: true});

is not working because there could be more .draggable divs

Upvotes: 0

Views: 2458

Answers (1)

Matt D. Webb
Matt D. Webb

Reputation: 3314

If you call .draggable().draggable() you can disable just the reservation:

UPDATE

To disable the table (from being draggable) once a reservation has been dropped, do this:

$('.table').droppable({
    activeClass: 'grey',
    hoverClass: 'yellow',
    accept: '.draggables',
    drop: function(event, ui){
       $(this).draggable('disable');
   }
}).draggable();;

$('.draggables').draggable({
    snap: '.table',
    snapMode: 'inner'
});

Here is a simple Demo Fiddle

Upvotes: 1

Related Questions