Question

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

通过点击试用策略，我尝试了来自drag的{{1}}事件，但它无效。

jquery-ui-draggable

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

在文档中，它说你应该使用“sort”而不是“drag”。

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

Answer 4

事件按以下顺序进行：

“手柄”-单击向下
“开始”-开始拖动-您可以在此处添加一个类
“激活”
“排序”-更改商品位置
“更改” –更改商品顺序
“ beforeStop”-释放鼠标键
“停用”
“退出”

“停止”-您可以在此处删除课程

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

为jquery-ui-sortable拖动事件

4 个答案: