jquery Sortable 防止 click() 或 dblclick() 事件在移动设备上触发

Question

我正在使用 jquery sortable 对我的网络应用程序上的照片进行排序，它可以根据需要完美地完成这项工作。但是，我无法在可排序列表项的元素上触发click() 或dblclick() 或on('click')，基本上是任何点击事件，这里是图像。

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>

JS

// JQUERY SORTABLE
$("#sortable").sortable({
  axis: 'x,y',
  containment: "parent",
  tolerance:'pointer',
    update: function(event, ui) {
    var item_order = new Array();
    $('ul.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();


// DOUBLE CLICK TO DELETE IMAGE (NOT WORKING)
$(".mediaSort").dblclick(function(){
  alert("Double Clicked!!");
});

上述双击功能不起作用。但是，为了测试，我尝试完全注释掉上面的 Sortable 函数以使其无效。瞧！双击完美。这意味着 Sortable 函数正在阻止点击事件触发。有什么解决办法吗？

Answer 1

如果我没看错的话，Touch Punch 似乎不能很好地处理“双击”：https://github.com/furf/jquery-ui-touch-punch/issues/25

考虑一下：jQuery on 'double click' event (dblclick for mobile)

我创建了以下小提琴进行测试：

https://jsfiddle.net/Twisty/uhyzgaL7/

移动测试：

https://jsfiddle.net/Twisty/uhyzgaL7/show/

JavaScript

$(function() {
  function myLog(string) {
    $("#log").prepend("<span>" + string + "</span>");
  }

  function doubleClick(event, callback) {
    var touchtime = $(event.target).data("touch-time");
    console.log("DC:", touchtime);
    if (touchtime == undefined || touchtime == 0) {
      // set first click
      $(event.target).data("touch-time", new Date().getTime());
    } else {
      // compare first click to this click and see if they occurred within double click threshold
      if (((new Date().getTime()) - touchtime) < 800) {
        // double click occurred
        console.log("DC Callback triggered");
        callback();
        $(event.target).data("touch-time", 0);
      } else {
        // not a double click so set as a new first click
        $(event.target).data("touch-time", new Date().getTime());
      }
    }
  }

  function removeItem(selector) {
    var item = $(selector);
    var parent = item.parent();
    item.remove();
    parent.sortable("refresh");
  }

  $("#sortable").sortable({
    axis: 'x,y',
    containment: "parent",
    tolerance: 'pointer',
    update: function(event, ui) {
      var item_order = $(this).sortable("toArray");
      myLog("Array Created: " + item_order.toString());
      $.ajax({
        type: "POST",
        url: "processes/sort.php",
        data: {
          list: "gallery",
          order: item_order
        },
        cache: false,
        success: function(data) {
          myLog("Success");
        }
      });
    }
  }).disableSelection();

  // DOUBLE CLICK TO DELETE IMAGE (NOT WORKING)
  /*
  $(".mediaSort").dblclick(function(event) {
    console.log("Double Click Detected");
    myLog("Double Click " + $(this).attr("id"));
  });
  */
  $(".mediaSort").click(function(e) {
    console.log(new Date().getMilliseconds());
    var self = $(this).get(0);
    doubleClick(e, function() {
      myLog("Remove Item: " + $(self).attr("id"));
      removeItem(self);
    });
  });
});

这在移动设备中效果不佳，在 Android 上使用 Chrome 进行测试。

我建议您为每个图标添加一个可以用作关闭/删除按钮的图标。请看：

https://jqueryui.com/droppable/#photo-manager

更新

您可以添加一个句柄，这样可以更好地解决它。

示例：https://jsfiddle.net/Twisty/uhyzgaL7/68/

手机：https://jsfiddle.net/Twisty/uhyzgaL7/68/show/

HTML

<div class="ui-helper-clearfix">
  <ul id="sortable" class="reorder-gallery mt-5">
    <li class="ui-state-default mediaSort" id="item-1" data-name="1.png">
      <h5>Item 1</h5>
      <img src="https://dummyimage.com/100x100/cecece/2e2e2e.jpg&text=Item+1" alt="Item 1">
    </li>
    <li class="ui-state-default mediaSort" id="item-2" data-name="2.png">
      <h5>Item 2</h5>
      <img src="https://dummyimage.com/100x100/cecece/2e2e2e.jpg&text=Item+2" alt="Item 2">
    </li>
    <li class="ui-state-default mediaSort" id="item-3" data-name="3.png">
      <h5>Item 3</h5>
      <img src="https://dummyimage.com/100x100/cecece/2e2e2e.jpg&text=Item+3" alt="Item 3">
    </li>
    <li class="ui-state-default mediaSort" id="item-4" data-name="4.png">
      <h5>Item 4</h5>
      <img src="https://dummyimage.com/100x100/cecece/2e2e2e.jpg&text=Item+4" alt="Item 4">
    </li>
  </ul>
</div>
<div id="log">
</div>

JavaScript

$(function() {
  function myLog(string) {
    $("#log").prepend("<span>" + string + "</span>");
  }

  function doubleClick(event, callback) {
    var touchtime = $(event.target).data("touch-time");
    console.log("DC:", touchtime);
    if (touchtime == undefined || touchtime == 0) {
      // set first click
      $(event.target).data("touch-time", new Date().getTime());
    } else {
      // compare first click to this click and see if they occurred within double click threshold
      if (((new Date().getTime()) - touchtime) < 800) {
        // double click occurred
        console.log("DC Callback triggered");
        callback();
        $(event.target).data("touch-time", 0);
      } else {
        // not a double click so set as a new first click
        $(event.target).data("touch-time", new Date().getTime());
      }
    }
  }

  function removeItem(selector) {
    var item = $(selector);
    var parent = item.parent();
    item.remove();
    parent.sortable("refresh");
  }

  $("#sortable").sortable({
    axis: 'x,y',
    containment: "parent",
    tolerance: 'pointer',
    handle: "h5",
    update: function(event, ui) {
      var item_order = $(this).sortable("toArray");
      myLog("Array Created: " + item_order.toString());
      $.ajax({
        type: "POST",
        url: "processes/sort.php",
        data: {
          list: "gallery",
          order: item_order
        },
        cache: false,
        success: function(data) {
          myLog("Success");
        }
      });
    }
  }).disableSelection();

  // DOUBLE CLICK TO DELETE IMAGE (NOT WORKING)
  $(".mediaSort").dblclick(function(event) {
    console.log("Double Click Detected");
    myLog("Double Click " + $(this).attr("id"));
    removeItem(this);
  });
  /*
  $(".mediaSort").click(function(e) {
    console.log(new Date().getMilliseconds());
    var self = $(this).get(0);
    doubleClick(e, function() {
      myLog("Remove Item: " + $(self).attr("id"));
      removeItem(self);
    });
  });
  */
});