jQuery可排序-用双击在列表之间移动元素

jQuery Sortable - moving elements between list with Double-Click

本文关键字：列表 之间 移动 元素 双击 排序 jQuery      更新时间：2023-09-26

我想在原来的jQuery可排序连接列表示例中添加一个功能:http://jqueryui.com/sortable/#connect-lists

由于我的第二个列表(#sortable2)有点大…我希望能够向下滚动页面，一旦我找到了我需要选择/移动的项目…只是翻倍。单击该列表上的以将其移动到另一个列表。

我需要将项(li)从#sortable2移动到#sortable1，以及从#sortable1移动到#sortable2。这个想法只是双击而不是拖动。

谢谢!

你的html 

 <ul id="sortable1" class="sortable_list connectedSortable">
    <li class="ui-state-default">sortable1 Item 1</li>
    <li class="ui-state-default">sortable1 Item 2</li>
 </ul>
 <ul id="sortable2" class="sortable_list connectedSortable">
    <li class="ui-state-default">sortable2 Item 1</li>
    <li class="ui-state-default">sortable2 Item 2</li>
 </ul>

只有在id = sortable2中，您才会将li.class = ui-state-default的项目附加到sortable1中。这一次将一个li项从sortable2添加到sortable1。

脚本

//attach on load
$(function() {
   $("#sortable2 .ui-state-default").dblclick(function(){        
     $("#sortable1").append(this);
   });
});

$(function() {
    $("ul li").dblclick(function(){             
            var parentID = $(this).parent().attr('id'); //sortable1 or sortable2
            if(parentID.match(/^(sortable1)$/g)) 
                $("#sortable2").append(this);                   
            else if(parentID.match(/^(sortable2)$/g))                
                $("#sortable1").append(this);               
    });
});
相关文章：