列表中的jQuery touch-punch draggable:滚动和拖动干扰(移动设备)

时间:2017-02-23 09:38:14

标签: javascript jquery scroll draggable jquery-ui-touch-punch

我正在尝试构建一个可拖动列表,但是拖动事件会以某种方式干扰移动设备上的滚动事件(在Windows平板电脑上测试,在台式机上运行正常)。我可以滚动或拖动但不能同时滚动或拖动。如果我将“-ms-touch-action”和“touch-action”设置为none,我可以滚动,如果我没有设置它,我可以拖动。

还包括Touch-punch。我认为,解决这个问题的最佳方法是通过将项目保持一到两秒来触发拖动事件,但我无法使其工作。

重要的是列表的溢出在开始时设置为可见,然后返回到''停止,因为我必须将项目拖出divs边界,而我的应用程序不允许我在任何其他方式。

您可以在此处测试代码:http://jsfiddle.net/LQuyr/344/

希望你们能帮助我。感谢。

// draggable
$('#sortable li').draggable({
  scroll: false,
  helper: 'clone',
  start: function(e, ui) {
    $('#sortable').css('overflow', 'visible');
  },
  stop: function(e, ui) {
    $('#sortable').css('overflow', '');
  }
});

1 个答案:

答案 0 :(得分:0)

也许延迟选项是您正在寻找的......

$('#sortable li').draggable({
      delay: 300,
      scroll: false,
      helper: 'clone',
      start: function(e, ui) {
        $('#sortable').css('overflow', 'visible');
      },
      stop: function(e, ui) {
        $('#sortable').css('overflow', '');
      }
    });