jquery sortable使用户能够在`n`秒后拖动元素答案

【问题标题】：jquery sortable make user able to drag elements after `n` secondsjquery sortable使用户能够在`n`秒后拖动元素
【发布时间】：2021-08-16 15:05:57
【问题描述】：

我正在使用 jquery sortable 对图像列表进行排序。目前，用户只需点击并移动图像即可对其进行排序。但是，我想让它的工作方式有所不同。我希望用户应该点击并按住图像（此处位于 <li> 标签内）2 秒钟，然后激活带有边框的图像，然后用户才能拖动图像进行排序。这可能吗？

HTML

<ul id="sortable" class="reorder-gallery mt-5">
  <li class="ui-state-default mediaSort" id="1" data-name="1.png">
    <img src="images/1.jpg" alt="">
  </li>
  <li class="ui-state-default mediaSort" id="2" data-name="2.png">
    <img src="images/2.jpg" alt="">
  </li>
  <li class="ui-state-default mediaSort" id="3" data-name="3.png">
    <img src="images/3.jpg" alt="">
  </li>
  <li class="ui-state-default mediaSort" id="4" data-name="4.png">
    <img src="images/4.jpg" alt="">
  </li>
</ul>

$("#sortable").sortable({
  axis: 'x,y',
  containment: "parent",
  tolerance:'pointer',
    update: function(event, ui) {
    $("#sortable").sortable( "option", "distance", 5 );
    var item_order = new Array();
    $('.reorder-gallery li').each(function() {
        item_order.push($(this).attr("id"));
    });
    $.ajax({
        type: "POST",
        url: "processes/sort.php",
        data: 'order='+item_order,
        cache: false,
      success: function(data){}
    });
    }
}).disableSelection();

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-sortable

【解决方案1】：

在可排序的 jQuery UI 中有 delay option 可能会有所帮助：

定义排序何时开始的时间（以毫秒为单位）。添加延迟有助于防止在单击元素时出现不必要的拖动。

请注意，该选项已弃用，仅在 1.12 之前的 jQuery UI 版本中可用。

还需要启用辅助程序 (helper: 'clone') 和 styled (#sortable .ui-sortable-helper)。

P.S.遗憾的是，当延迟时间过去后，我没有找到改变样式的方法。

$("#sortable").sortable({
  delay: 1000, // wait for 1 second before dragging
  helper: "clone", // allows styling of element when dragging
  axis: 'x,y',
  containment: "parent",
  tolerance:'pointer',
    update: function(event, ui) {
    $("#sortable").sortable( "option", "distance", 5 );
    var item_order = new Array();
    $('.reorder-gallery li').each(function() {
        item_order.push($(this).attr("id"));
    });
    $.ajax({
        type: "POST",
        url: "processes/sort.php",
        data: 'order='+item_order,
        cache: false,
      success: function(data){}
    });
    }
}).disableSelection();

#sortable .ui-sortable-helper {
  border: 1px solid red;
}

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<ul id="sortable" class="reorder-gallery mt-5">
  <li class="ui-state-default mediaSort" id="1" data-name="1.png">
    <img src="images/1.jpg" alt="">
  </li>
  <li class="ui-state-default mediaSort" id="2" data-name="2.png">
    <img src="images/2.jpg" alt="">
  </li>
  <li class="ui-state-default mediaSort" id="3" data-name="3.png">
    <img src="images/3.jpg" alt="">
  </li>
  <li class="ui-state-default mediaSort" id="4" data-name="4.png">
    <img src="images/4.jpg" alt="">
  </li>
</ul>

【讨论】：