StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POSet conditions for draggable objects when dropped - Jquery - UI
text
Body
copied!<p>Let's say we have multiple draggable elements in one page and multiple droppable targets. Each draggable element has only one droppable target. My question is: how to test if the right element is being dropped on it's right target. Here is an example fiddle: <a href="http://jsfiddle.net/D25Rt/" rel="nofollow">http://jsfiddle.net/D25Rt/</a></p> <p>this is the code from the example:</p> <pre><code>$("#draggable-red, #draggable-blue, #draggable-green").draggable({ revert: "invalid", containment: "#content"}); $("#droppable-red").droppable({ accept: "#draggable-red", activeClass: "ui-state-hover", hoverClass: "ui-state-active", drop: function(event, ui) { $(this).addClass("ui-state-highlight").find("p").html("Touch down!"); } }); $("#droppable-blue").droppable({ accept: "#draggable-blue", activeClass: "ui-state-hover", hoverClass: "ui-state-active", drop: function(event, ui) { $(this).addClass("ui-state-highlight").find("p").html("Touch down!"); } }); $("#droppable-green").droppable({ accept: "#draggable-green", activeClass: "ui-state-hover", hoverClass: "ui-state-active", drop: function(event, ui) { $(this).addClass("ui-state-highlight").find("p").html("Touch down!"); } }); </code></pre> <p>To be more specific, regarding the previous example, if I drag the blue ball over the red box, when I release the blue ball I want to display an alert( something like "Wrong box..."). I'm new to jQuery UI, can someone give me some hints on how and where should i do that? in the <strong>accept</strong> option or in the <strong>drop</strong> option ? </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload