javascript - Jquery 中 .sortable 函数的问题

Question

这是一个JSfiddle我正在合作。

我正在尝试创建两个列表，我可以在其中将每个项目移入和移出，并且更改将在下面的更新功能/排序状态 div 区域内更新。

我在第 3 行上的第一个警报有效，但是当我在第 5 行上调用单击函数时，第 6 行警报不起作用。总的来说，我认为我的代码可能缺少某些东西或者分号等不合适。请帮忙并留下反馈，谢谢。

$(document).ready(function() {
 alert(0);
 $(".shopping_list").onclick(function() {
    alert(1);
    $("#names #places").sortable({
         containment: 'parent', 
        tolerance: 'pointer',
        cursor: 'pointer', 
        revert: true, 
        opacity: 0.60,
        connectWith:"#names #places",
        update: function(event, ui) {
             content = $(this).text();
              $('#sort_status').text(content);
        }
    })

 });
});

Answer 1

喜欢grissom在他的answer中指出和评论，

• 首先您需要添加jQuery-UI .
• $("#names #places")搜索元素 #places元素内部 #names 。要选择这两个元素，您需要用逗号分隔它们，例如 $("#names , #places") 。
• 您应该将可排序初始化移出点击事件。

除此之外:

• 您需要删除 containment :'parent'否则，您无法将项目拖出当前列表(因此显然您无法在列表之间移动项目)

  Demo

• 除非你想要<h3>标题可排序(这也是无效的 HTML ) - 您需要将它们移出 <ul>

Demo