可排序的js在移动浏览器中不起作用

Question

下面是可排序的 jquery 代码，它在 dasktop 中工作正常，但在移动浏览器中无法工作，所以请建议如何解决...？

$(document).ready(function() {
      $("#post_list").sortable({
        placeholder: "ui-state-highlight",
        handle: ".socialmediaspacing",
        delayOnTouchOnly: true,
        update: function(event, ui) {
          var post_order_ids = new Array();
          $('#post_list div.listitems').each(function() {
            post_order_ids.push($(this).data("post-id"));
          });
          $.ajax({
            url: "url",
            method: "POST",
            data: {
              post_order_ids: post_order_ids,
              "_token": "{{csrf_token()}}"
            },
            success: function(data) {
              $('#socail-profile-mobileview').html(data);
              Snackbar.show({
                  pos: 'bottom-right',
                  text: "Ordering changed successfully.",
                  actionText: 'Okay'
              });
            }
          });
        }
      });
      $( "#post_list" ).disableSelection();
    });

Answer 1

这是由于触摸事件未被正确识别造成的。

您可以编写自己的事件，也可以使用库来执行此操作。出于类似的目的，我使用jQuery UI Touch Punch，它效果很好。

您只需要将文件.js包含在jquery-ui.js

<script src="jquery.ui.touch-punch.min.js"></script>

不需要其他任何东西，所有标准 jquery-ui 功能现在都应该在触摸设备上运行：sortable等等draggable。