jquery-ui-sortable 的拖动事件

Question

当jquery-ui-sortable被拖拽时如何监听drag事件？

通过 hit-n-trial 策略，我尝试了来自 jquery-ui-draggable 的 drag 事件，但它不起作用。

$('.widget_container').sortable({
    drag: function(event, ui) { console.log('drag'); }
});

Answer 1

为此目的使用sort事件：

$(".sortable").sortable({
    sort: function(e) {
      console.log('X:' + e.screenX, 'Y:' + e.screenY);
    }
});

http://jsbin.com/kegeb

Answer 2

如果您需要在用户开始拖动时处理该事件，您应该使用handle而不是sort：

$(".sortable").sortable({
    handle: function(e) {
      console.log('Handled');
    }
});

此事件将在拖动开始时以及页面加载时发生 (http://api.jqueryui.com/sortable/#option-handle)。

我建议您也检查一下这个答案，它解释了更新列表时处理元素的正确方法：Get order of list items in a jQuery Sortable list after resort

祝你好运

Answer 3

在文档上说你应该使用“排序”而不是“拖动”。

http://api.jqueryui.com/sortable/#option-forcePlaceholderSize

Answer 4

事件按此顺序进行：

1. “句柄”- 向下点击
2. “start”——开始拖拽——你可以在这里添加一个类
3. “激活”
4. “排序” - 更改项目位置
5. "change" – 更改项目顺序
6. “beforeStop” - 释放鼠标按钮
7. “停用”
8. “出”
9. "stop" - 你可以在这里删除一个类

   $(function() {
     $("#sortable").sortable();
     $("#sortable").disableSelection();
     $("#sortable").sortable({
       axis: "y"
     });
   
     $("#sortable").sortable({
       handle: function(event, ui) {
         console.log("handle")
       }
     });
   
     $("#sortable").sortable({
       activate: function(event, ui) {
         console.log("activate")
       }
     });
   
     $("#sortable").sortable({
       beforeStop: function(event, ui) {
         console.log("beforeStop")
       }
     });
   
     $("#sortable").sortable({
       change: function(event, ui) {
         console.log("change")
       }
     });
   
     $("#sortable").sortable({
       create: function(event, ui) {
         console.log("create")
       }
     });
   
     $("#sortable").sortable({
       deactivate: function(event, ui) {
         console.log("deactivate")
       }
     });
   
     $("#sortable").sortable({
       out: function(event, ui) {
         console.log("out")
       }
     });
   
     $("#sortable").sortable({
       over: function(event, ui) {
         console.log("over")
       }
     });
   
     $("#sortable").sortable({
       receive: function(event, ui) {
         console.log("receive")
       }
     });
   
     $("#sortable").sortable({
       remove: function(event, ui) {
         console.log("remove")
       }
     });
   
     $("#sortable").sortable({
       sort: function(event, ui) {
         console.log("sort")
       }
     });
   
     $("#sortable").sortable({
       start: function(event, ui) {
         console.log("start");
         ui.item.addClass("dragged");
       }
     });
   
     $("#sortable").sortable({
       stop: function(event, ui) {
         console.log("stop")
         ui.item.removeClass("dragged");
       }
     });
   
     $("#sortable").sortable({
       update: function(event, ui) {
         console.log("update")
       }
     });
   });
   
   
   $("#sortable").on("click", "li", function() {
     console.log("click");
   });

   #sortable {
     list-style-type: none;
     margin: 0;
     padding: 0;
   }
   
   #sortable li {
     margin-bottom: 0.25em;
     padding: 0.5em;
     border: 1px solid black;
   }
   
   #sortable .dragged {
     border-color: red;
   }

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <ul id="sortable">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
   </ul>