2011-03-15 79 views
0

在互联网上搜索一个解决方案(我真的是新的HTML,JQuery,PHP,我是一个as400 rpg程序员,现在正在转向这种架构) ,最后我在这里寻求帮助。我想在一个选项卡中获得一个可排序的项目列表(这是完成的),从这个列表中我想将一个项目拖到另一个选项卡,这是主要问题:下面的代码正在工作,但我无法拖入第一个标签。在排序方面,我已经提醒了可视化标签代码并看到更新正在工作。在PHP中,我把代码写入数据库,我必须更新列表中的信息。我从JQueryUI.com复制了所有代码。JQueryUI连接列表+排序标签

$(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><a href="#tabs-1">Tab 1</a></li> 
     <li><a href="#tabs-2">Tab 2</a></li> 
     <li><a href="#tabs-3">Tab 3</a></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> 

还有另一个问题:为什么当我拖放到另一个选项卡,该项目始终把以第四名的名单? 谢谢任何​​人都可以帮助我。

回答