jquery-ui-sortable 的拖动事件

Posted 2023-05-08

【中文标题】jquery-ui-sortable 的拖动事件

【英文标题】：drag event for jquery-ui-sortable

【发布时间】：2011-12-30 04:39:07

【问题描述】：

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

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

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

【参考方案1】：

为此目的使用sort事件：

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

http://jsbin.com/kegeb

【讨论】：

如此明显，我已经看到了……哈哈。完美！

【参考方案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

祝你好运

【讨论】：

我尝试了'handle'方法，发现它无法区分点击和拖动，并且奇怪的是禁用了点击排序功能。

"Handle" 在点击后调用，而不是在开始拖动后调用。不是很有用。

【参考方案3】：

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

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

【参考方案4】：

事件按此顺序进行：

“句柄”- 向下点击 “start”——开始拖拽——你可以在这里添加一个类 “激活” “排序” - 更改项目位置 "change" – 更改项目顺序 “beforeStop” - 释放鼠标按钮 “停用” “出” "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>