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

首先： $("#names #places")这意味着你有一个id为＆＃34; name＆＃34;并且该元素具有id为＃34; place＆＃34;。

的子元素

您必须为每个列表设置可排序。也： $(".shopping_list").onclick应该是：

$(".shopping_list").click

Answer 2

与grissom及其评论

中指出的answer一样

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

除此之外：

您需要删除containment：'parent'否则您无法将该项目拖出当前列表（因此您无法在列表之间移动项目，显然）

Demo
除非您希望<h3>标题可以排序（这也是无效的HTML） - 您需要将它们移出{{1} }

Jquery中.sortable函数的问题

2 个答案:

Demo