JQuery UI - allow droppable to have a lockable div

Question

I am not sure how to achieve what I am trying to do. Here I give an example:

http://jsfiddle.net/zs6US/

$('.draggable').draggable({ revert: 'invalid' }); $('#droppable').droppable({ accept: '.draggable' }); 

The green flag is valid. The red box is not. If the draggable drops to red, even red that is on top of green, I want it to be invalid and return. In this example, this does not work.

Is this achievable? I attached API and other questions and could not find the answer.

Answer 1

Just add both elements to the dropdown types, and then mark the element to which it was dropped. If it is block , then return.

http://jsfiddle.net/zs6US/12/

 $('.draggable').draggable({ revert: 'invalid' }); $('#droppable, #block').droppable({ accept: '.draggable', drop: function( event, ui ) { if (this.id == 'block') { ui.draggable.draggable({ revert: true }); } else { ui.draggable.draggable({ revert: "invalid"}); } } }); 

Answer 2

May be a workaround:

http://jsfiddle.net/zs6US/4/show

http://jsfiddle.net/zs6US/4/

 $('.draggable').draggable({ revert: 'invalid' }); $('#droppable').droppable({ accept: '.draggable', drop: function (e, ui) { ui.draggable.hide(); console.log(ui); var target = document.elementFromPoint(ui.offset.left, ui.offset.top); if (!target || target.id != "droppable") ui.draggable.draggable({ revert: true }); else ui.draggable.draggable({ revert: false }); ui.draggable.show(); } }); 

Answer 3

The decision made is cleaner, but has 1 problem. As soon as Draggable falls over the green zone, it will beocome Droppable even on a white background ... (Note revert: false ) Updates this answer with the correct code.

Demo2

 $('.draggable').draggable({ revert: 'invalid' }); $('#droppable, #block').droppable({ accept: '.draggable', drop: function( event, ui ) { if(!ui.draggable.data('original')){ ui.draggable.data('original',ui.draggable.draggable("option", "revert")); } if (this.id == 'block') { ui.draggable.draggable({ revert: true }); } else { ui.draggable.draggable({ revert: ui.draggable.data('original') }); } } }); 

---

This question seems to already have an answer. but here is my attempt to solve the same problem.

Demo

 $('#block').droppable({ accept: '.draggable', drop: function (event, ui) { if (ui.draggable.data('revert')) { ui.draggable.data('revert', false); var old = ui.draggable.draggable("option", "revert"); ui.draggable.draggable("option", "revert", true); setTimeout(function () { ui.draggable.draggable("option", "revert", old); }, 100); } }, out: function (event) { $('.draggable').data('revert', false); }, over: function (event,ui) { ui.draggable.data('revert', true); } }); $('#droppable').droppable({ accept: function (elem) { if ($('.draggable').data('revert')) { return false; } return elem.hasClass("draggable"); } }); $('.draggable').draggable({ revert: 'invalid' });