javascript - jQuery中的.sortable函数问题

原文 标签 javascript jquery jquery-ui jquery-ui-sortable containment

这是我正在使用的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);
        }
    })

 });
});

最佳答案

就像grissom在他的answer和评论中指出的那样,


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


除此之外:


您需要删除containment'parent'否则您不能将项目拖出当前列表(显然,因此您不能在列表之间移动项目)

Demo
除非您希望<h3>标头可排序(这也是无效的HTML)-您需要将其移出<ul>


  Demo

相关文章:

javascript - 放松href到网站的div / section

jquery - jQuery UI:如何打开对话框

javascript - 我的ng-change未在我的Angular / Rails应用上触发

jquery - Html.BeginForm是否具有OnSuccess事件

php - 使用jQuery AJAX重定向用户单击按钮

javascript - 使用滑块缩放背景CSS

javascript - Firefox Javascript:从“数字”类型的输入中删除非数字字符-FF问题

javascript - 如何使用WatchPosition()函数地理定位来观看其他坐标

javascript - 如何从jquery对象中的变量设置键?

css - 使<span>渲染成一行