jQuery Sortable在iPad等触控设备上无法正常工作的问题求助

我之前也碰到过几乎一模一样的情况——桌面端拖拽顺畅得很，到了iPad上就彻底失灵，还会出现你说的灰色高亮、长按选中文本的问题。结合你的代码和描述，咱们一步步来排查修复：

1. 调整脚本加载顺序（关键！） #

Touch Punch是给jQuery UI的Mouse组件打触控补丁的，加载顺序错了就完全起不了作用。你当前的顺序是jQuery → jQuery Mobile → jQuery UI → Touch Punch，这会让jQuery Mobile先拦截触控事件，正确的顺序应该是：

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<!-- Touch Punch必须紧跟在jQuery UI之后加载 -->
<script>
/*! jQuery UI Touch Punch 0.2.3 代码... */
</script>
<script src="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.js"></script>

2. 禁用iOS默认干扰行为 #

你遇到的灰色背景（tap高亮）和长按选中文本，都是iOS的默认浏览器行为，用CSS就能禁用：

/* 禁止长按选中文本 */
.Sortable_List, .Sortable_List li {
  -webkit-user-select: none;
  user-select: none;
}

/* 移除tap时的灰色高亮 */
.Sortable_List li {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

/* 可选：禁用iOS长按弹出的菜单 */
.Sortable_List {
  -webkit-touch-callout: none;
}

3. 改用jQuery Mobile的pageinit事件初始化 #

jQuery Mobile的页面加载逻辑和普通网页不一样，$(document).ready()可能在页面元素还没完全渲染好就执行了，导致Sortable没绑定成功。换成pageinit事件：

$(document).on('pageinit', function() {
  $('#sortable').sortable({
    axis: 'y',
    update: function (event, ui) {
      var data = $(this).sortable('serialize');
      $.ajax({
        data: data,
        type: 'POST',
        url: 'inc/refresh_order.php?table=Product_Sections',
        success: function(response) {
          var message = "<p>Succesfully updated order of Product Sections</p>";
          $('#message').html(message);
        }
      });
    },
    // 新增：排除jQuery Mobile的按钮/图标，避免干扰拖拽
    cancel: '.ui-btn, .ui-icon'
  });

  $( "#sortable" ).on( "sortstop", function(event, ui) {
    $(this).listview('refresh');
  });

  $( "#sortable" ).disableSelection();
});

另外把bind换成on，jQuery 1.7+更推荐用on来绑定事件。

4. 排查jQuery Mobile ListView的冲突 #

jQuery Mobile的listview会给ul/li加很多额外的样式和事件，可能和Sortable冲突。可以先确保listview初始化完成后再绑定Sortable：

// 先初始化并刷新listview
$('#sortable').listview().listview('refresh');
// 再绑定Sortable
$('#sortable').sortable({ /* 你的配置 */ });

按照这几步调整后，应该就能在iPad上正常拖拽排序了。我之前就是靠调整加载顺序+禁用默认行为解决了同款问题。

内容的提问来源于stack exchange，提问作者KDJ