javascript jquery-ui-sortable 的拖动事件

drag event for jquery-ui-sortable

提问by Imran Naqvi

How to listen to dragevent when a jquery-ui-sortableis being dragged?

拖动draga时如何收听事件jquery-ui-sortable？

By hit-n-trial strategy, I've tried dragevent from jquery-ui-draggablebut it's not working.

通过命中n-trial策略，我已经尝试过drag事件，jquery-ui-draggable但它不起作用。

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

回答by v42

Use sortevent for this purpose:

sort为此目的使用事件：

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

http://jsbin.com/kegeb

http://jsbin.com/kegeb

回答by Gangai Johann

If you need to handle the event when the user starts todrag, you should use handleinstead of sort:

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

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

This event will occurs at the beginning of the drag, and when the page is loaded (http://api.jqueryui.com/sortable/#option-handle).

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

I suggest you to also check this answer, which explains the correct ways to handle your elements when your list is updated : Get order of list items in a jQuery Sortable list after resort

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

Good luck

祝你好运

回答by kroe

On the documentation it says you shall use "sort" instead of "drag".

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

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

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

回答by Henry Brewer

Events go in this order:

事件按以下顺序进行：

1. "handle" - click down
2. "start" - start of dragging - you can add a class here
3. "activate"
4. "sort" - change of the item position
5. "change" – change of the items order
6. "beforeStop" - release of a mouse button
7. "deactivate"
8. "out"
9. "stop" - you can remove a class here

   $(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>

1. “手柄” - 点击向下
2. “开始” - 开始拖动 - 你可以在这里添加一个类
3. “启用”
4. “排序” - 更改项目位置
5. "change" – 更改项目顺序
6. “beforeStop” - 释放鼠标按钮
7. “停用”
8. “出去”
9. “停止” - 您可以在此处删除课程

   $(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>