jQuery: how to enable droppable again

Question

I want it to be possible to drag (draggables) several HTML elements into several other HTML elements. (droppables)

I found the jQuery UI draggable/droppable.

Currently, I define all li elements inside an ul as draggable. I also have three divs which accept all the draggable li elements.

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

Defining them as draggable:

$('li').draggable({ revert: 'invalid' });

My droppable divs:

<div class="droppable" id="div1"></div>
<div class="droppable" id="div2"></div>
<div class="droppable" id="div3"></div>

Make the divs droppable:

$('div.droppable').droppable({ accept: 'li', drop: funcDrop, out: funcOut });

I now want that only one li element can be dropped into a div at the same time. I am trying to do that by disabling the droppability inside the div element I dropped the draggable, like so:

funcDrop = function(event, ui) { 

  $(this).droppable('disable');

}

This works. Now I am not able drop any further li elements into this div. The problem is, how/when to enable the div again? Clearly if the contianing draggable was removed. So I tried to enable the div inside funcOut:

funcOut= function(event, ui) { 

  strIdValue = event.target.id;

  $('#' + strIdValue).droppable('enable');

}

But this does not work. It seems also that I can't work with $(this) selector inside the funcOut.

Does anyone have a hint?

Best regards

I use jQuery 2.1 and UI 1.10.4

Hi, are you sure ` $('#' + strIdValue) ` is selecting the correct element? try ` console.log( $('#' + strIdValue).size() ); ` — JF it, Mar 04 '14 at 15:39
Hi, yes I am sure. I left the debugging code here. It seems that the out function is not called again after the draggable has been moved at least one time. The div just don't gets enabled again :( — user3180943, Mar 04 '14 at 15:42
the closest I can get: http://jsfiddle.net/qN8s9/ if you drag a li element into a div, it will be placed. now you can't add another li element to the div. I don't know why the li will be stuck in the diff, this differs from the version in my browser even if the code is the same. anyway, even if you could drag a stuck element, my problem is, that the div will not become droppable even if the li element has left completly the div. — user3180943, Mar 04 '14 at 16:32
Hi, I managed to create a working JSFiddle: http://jsfiddle.net/qN8s9/1/ You can drag foo into 1. now you are not able to drag bar into 1. if you now drag foo into 2, you can't drag bar as well as foo into 1 anymore. 1 will not be enabled. — user3180943, Mar 05 '14 at 10:39

score 1 · Answer 1 · answered Mar 06 '14 at 08:38

I figured out an alternative solution:

It seems if an element once was disabled, the out event does not fire and I am therefore not able to enable it again using the element itself. So what I did, is this:

If you drop a draggable element on a droppable element, the drop event is triggered and does this:

$(this).droppable({ accept: ('#' + $(ui.draggable).attr('id')) });

So the droppable is not disabled, but accepts only the received draggable by its unique HTML id. Because it is not disabled the out event will now be triggered. This is what I do in it:

$(this).droppable({ accept: 'li' });

Now the droppable accepts all HTML li elements as ever. Now each droppable accepts only one draggable. The droppable is now "locked" if it receives a draggable.

I wonder if this is a valid solution or just a dirty hack.

score 0 · Answer 2 · edited May 23 '17 at 11:44

(Possible duplicate/related: jQuery UI - Droppable only accept one draggable)

Based on the JSFiddle you've shared (which currently is not doing what you asked), here is a modified version of the droppable function that you can use to achieve the desired result:

    $(".droppable").droppable({
        accept: "li",
        drop: function(event, ui) { 
            $(this).droppable('option', 'accept', ui.draggable);
        },
        out: function(event, ui){
            $(this).droppable('option', 'accept', 'li');
        }   

    });

As the other answer stated, the trick is to make our droppable div accept 'ui.draggable', being ui the item that is currently being dragged to our droppable div.

Hope that helps!

(EDITED: Grammar)

jQuery: how to enable droppable again

2 Answers2