Multiple Connected Sortables and additional droppable - items dropped on droppable do not revert to sortable of origin
The Scenario:
I have a single page that has three sortables on it (arranged
horizontally relative to one another), all connected via the
"connectWith" option. Between the three of them, I can sort, drag and
drop...no problems. I added a droppable on the bottom left of the page
so that the user can drop an item from any of the three lists onto it,
some action is performed (in this case, a search based on the dropped
item), and the dropped item should then revert back to its place of
origin.
LIST A LIST B LIST C
[droppable here]
The Issue:
If I drag an item from list C to the droppable, and I have crossed
over any of the other div containers for list A or B, the item reverts
back to the last list that was crossed over instead of its list of
origin! My list divs are of a fixed height and scrollable, so although
the scrollable area ends above the droppable, the actual height
extends down to it.
screenshot: http://www.dougboude.com/images/jqueryissue.gif
Any ideas??? Somehow I need to make it so that an item does not become
part of a list until the user actually lets it go on top of the target
list, OR be able to manually cancel the drop into the crossed over
list using the droppable's 'drop' callback. it is currently behaving
such that an item becomes part of the
list as soon as it crosses over the list's border.
Thanks so much in advance for any input/assistance you can give me.
I've run out of things to try, and that's never a good feeling.
Code:
<table width="50%" border="1">
<tr>
<td valign="top">
<div class="wrapper connectedSortable" id="tlwrapper"
style="border:thin solid green;height:425px;width=350px;overflow-
y:scroll;">
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>John Smith</div>
</div>
</td>
<td valign="top">
<div class="wrapper connectedSortable" id="tmwrapper"
style="border:thin solid blue;height:425px;width=350px;overflow-
y:scroll;">
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Lucy Lu</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Johny McJohnerson <img src="../images/
icon_person_un.gif" /> <a href="#" ><img style="border:none;"
src="../images/icon_information.gif" /></a></div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Roger McRogerson <img src="../images/
icon_person_dep.gif" /> <a href="#" ><img style="border:none;"
src="../images/icon_information.gif" /></a></div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Stu McStupidson</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Archie Bald</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Betty Will <img src="../images/
icon_person_dep.gif" /> <a href="#" ><img style="border:none;"
src="../images/icon_information.gif" /></a></div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Marge McLargerson</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Toby McToberson</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Word Sherril</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Phrase Denise</div>
</div>
</td>
<td valign="top">
<div class="wrapper connectedSortable" id="apwrapper"
style="border:thin solid red;height:425px;width=350px;overflow-
y:scroll;">
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Johny Cake</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Tim Barnhill</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Roger Rabbit <img src="../images/
icon_person_dep.gif" /> <a href="#" ><img style="border:none;"
src="../images/icon_information.gif" /></a></div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Alison Chains</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Tiny Archibald</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Bruce Willis</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Lone Ranger</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>George Bush</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Ned Divine</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Derek Zoolander</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Peter Parker</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Marylin Monroe <img src="../images/
icon_person_dep.gif" /> <a href="#" ><img style="border:none;"
src="../images/icon_information.gif" /></a></div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Justin Roper</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Bearded Barley</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Boyan Kostadinov</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Andrea Smith <img src="../images/
icon_person_un.gif" /> <a href="#" ><img style="border:none;"
src="../images/icon_information.gif" /></a></div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Derek Smith <img src="../images/
icon_person_un.gif" /> <a href="#" ><img style="border:none;"
src="../images/icon_information.gif" /></a></div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Fu Manchu</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Bruno Boude</div>
<div class="p"><img class="grabme" src="../images/grippy.gif"
style="cursor:move;"/>Rot Gut</div>
</div>
</td>
</tr>
<tr>
<td>
Adjuster: <div id="adjtarget"
class="connectedSortable"><img src="../images/target.gif"
align="absmiddle" /></div> <---- <span style="font-size:
11px;color:black;font-style:italic;">(drop an adjuster here...)</span>
</td>
<td> </td>
<td> </td>
</tr>
</table>
<script>
$(document).ready(function(){
$("#tmwrapper, #apwrapper, #tlwrapper").sortable({
tolerance: 'false',
handle: '.grabme',
connectWith: $('.connectedSortable'),
items: '.p',
helper: 'original',
revert: 'valid',
receive: function(ev,ui){alert('receiving!');
//var droppedPerson = ui.item.html();
//change class to match target area
//append to target
},
update: function(ev,ui){
alert('updating!');
}
}).disableSelection();
$("#adjtarget").droppable({
activeClass:'.targethighlight',
drop:function(ev,ui){
alert('dropped');
}
});
});
</script>
Topic Participants
Richard Worth