StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I see that you already got an answer; anyway I had this same problem today and I solved it this way:</p> <pre><code>var outside = 0; // this one control if the draggable is outside the droppable area $('#droppable').droppable({ accept : '.draggable', out : function(){ outside = 1; }, over : function(){ outside = 0; } }); // this one control if the draggable is dropped $('body').droppable({ accept : '.draggable', drop : function(event, ui){ if(outside == 1){ alert('Dropped outside!'); }else{ alert('Dropped inside!'); } } }); </code></pre> <p>I needed that because I couldn't change the options of my draggables, so I had to work only with droppables (I needed it inside the awesome <a href="http://arshaw.com/fullcalendar/" rel="nofollow">FullCalendar</a> plugin). I suppose it could have some issues using the "greedy" option of droppables, but it should work in most cases.</p> <p>PS: sorry for my bad english.</p> <p><strong>EDIT:</strong> As suggested, I created the version using the jQuery.data; it can be found here : <a href="http://jsfiddle.net/Polmonite/WZma9/" rel="nofollow">jsfiddle.net/Polmonite/WZma9/</a></p> <p>Anyway jQuery.data documentation say:</p> <blockquote> <p>Note that this method currently does not provide cross-platform support for setting data on XML documents, as Internet Explorer does not allow data to be attached via expando properties.</p> </blockquote> <p>(meaning that it doesn't work on IE prior to 8)</p> <p><strong>EDIT 2:</strong> As noted by @Darin Peterson , the previous code doesn't work with more than one drop-area; this should fix that issue: <a href="http://jsfiddle.net/Polmonite/XJCmM/" rel="nofollow">http://jsfiddle.net/Polmonite/XJCmM/</a></p> <p><strong>EDIT 3:</strong> Example from EDIT 2 has a bug. If I drag "Drag me!" to the bottom droppable, then drop "Drag me too" to the upper droppable and then drop "Drag me too" outside, it alerts "Dropped inside!" So, don't use it.</p> <p><strong>EDIT 4:</strong> As noted by @Aleksey Gor, the example in Edit 2 was wrong; actually, it was more of an example to explain how to loop through all the draggables/droppables, but I actually forgot to remove the alert messages, so it was pretty confusing. <a href="http://jsfiddle.net/Polmonite/XJCmM/10/" rel="nofollow">Here </a> the updated fiddle.</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