JQueryUI Connected lists + sortable in tabs - jquery-ui-tabs

Question

after days passed on the internet searching for a solution (I'm really new with HTML, JQuery, php, I'm an as400 rpg programmer that now is moving to this kind of architecture), finally I'm here to ask for a help. I want to obtain a sortable list of items in one tab (and this is done) and from this list I want to drag one item to another tab and this is the main problem : the following code it's working but I can't drag into the first tab. In the sortable I have put the alert to visualize the tab code and to see that the update is working. In the php I put the code to write the database which I have to update with the information from the lists. I copied all the code from JQueryUI.com.
$(document).ready(function() {
$( "ul.dropfalse" ).sortable({
connectWith: "ul.dropfalse",
cursor: 'crosshair',
opacity: 0.8,
placeholder: "ui-state-highlight",
revert: true,
scroll: true,
update: function (event, ui) {
var target = event.target.id;
alert(target);
var order = $(this).sortable('serialize');
$("#update").load("tabsitem.php?"+order);
alert("update")
}
});
$( "#sortable" ).disableSelection();
$( "#tabs" ).tabs();
})
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1">
<ul id="sortable1" class='dropfalse'>
<li id="TABItem_11"><img src="arrow.png" alt="move" />1st TAB.Item 1</li>
<li id="TABItem_12"><img src="arrow.png" alt="move" />1st TAB.Item 2</li>
<li id="TABItem_13"><img src="arrow.png" alt="move" />1st TAB.Item 3</li>
<li id="TABItem_14"><img src="arrow.png" alt="move" />1st TAB.Item 4</li>
<li id="TABItem_15"><img src="arrow.png" alt="move" />1st TAB.Item 5</li>
</ul>
</div>
<div id="tabs-2">
<ul id="sortable2" class='dropfalse'>
<li id="TABItem_21"><img src="arrow.png" alt="move" />2nd TAB.Item 1</li>
<li id="TABItem_22"><img src="arrow.png" alt="move" />2nd TAB.Item 2</li>
<li id="TABItem_23"><img src="arrow.png" alt="move" />2nd TAB.Item 3</li>
<li id="TABItem_24"><img src="arrow.png" alt="move" />2nd TAB.Item 4</li>
<li id="TABItem_25"><img src="arrow.png" alt="move" />2nd TAB.Item 5</li>
</ul>
</div>
<div id="tabs-3">
<ul id="sortable3" class='dropfalse'>
<li id="TABItem_31"><img src="arrow.png" alt="move" />3rd TAB.Item 1</li>
<li id="TABItem_32"><img src="arrow.png" alt="move" />3rd TAB.Item 2</li>
<li id="TABItem_33"><img src="arrow.png" alt="move" />3rd TAB.Item 3</li>
<li id="TABItem_34"><img src="arrow.png" alt="move" />3rd TAB.Item 4</li>
<li id="TABItem_35"><img src="arrow.png" alt="move" />3rd TAB.Item 5</li>
</ul>
</div>
</div>
<pre>
<div id="update">Waiting for update</div>
</pre>
There is also another question : why when I drop into another tab, the item is always put to the 4th place in the list ?
Thank to anybody could help me.

Answer 1

You need to check out http://www.java2s.com/Code/JavaScript/jQuery/jQueryUISortableConnectlistswithTabs.htm