jQuery connected sortable - click to move not working correctly -

jQuery connected sortable - click to move not working correctly -

i have 2 connected sortable lists using jquery ui , made when click on element in 1 list, add together bottom of other list , vice-versa. problem facing works 1 way, not other. when click on item in first list moves other list correctly. when seek go other way appends item itself. fiddle demonstrates problem having: http://jsfiddle.net/qcf9g/. here code well:

html

<div class="container"> exclude <ul id="exclude" class="connectedsortable"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> </ul> </div> <div class="container"> include <ul id="include" class="connectedsortable"></ul> </div>

javascript (jquery)

$("#exclude, #include").sortable({ connectwith: ".connectedsortable", distance: 10 }).disableselection(); $("#exclude li").click(function() { $(this).detach().appendto("#include"); }); $("#include li").click(function() { $(this).detach().appendto("#exclude"); });

try this:

$("li").click(function() { if ($(this).closest("ul").attr("id") === "exclude"){ $(this).appendto("#include"); } else { $(this).appendto("#exclude"); } });

i tested on js fiddle , works.

the js posted adding click listeners when updated. since there no elements within include unordered list, none of list items within include ul listening clicks.

for example, seek html same js had before:

<div class="container"> exclude <ul id="exclude" class="connectedsortable"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </div> <div class="container"> include <ul id="include" class="connectedsortable"> <li>item 4</li> <li>item 5</li> </ul> </div>

item 4 , 5 move exclude , remain there. 1, 2, , 3 move include , remain there

jquery jquery-ui