jQuery Sortable - 通过双击在列表之间移动元素答案

【问题标题】：jQuery Sortable - moving elements between list with Double-ClickjQuery Sortable - 通过双击在列表之间移动元素
【发布时间】：2017-03-25 02:26:39
【问题描述】：

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

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

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

谢谢！

【问题讨论】：

请向我们提供到目前为止您为此要求所做的工作，以便我们改进/纠正/建议。 jsfiddle 可能与您当前的实现有关

标签： javascript jquery html jquery-ui

【解决方案1】：

你的 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);
   });
});

【讨论】：

【解决方案2】：

$(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);               
    });
});

【讨论】：