gpt4 book ai didi

javascript - jQuery UI Sortable——当页面可滚动时,Div 不可拖动

转载 作者:太空狗 更新时间:2023-10-29 14:09:23 25 4
gpt4 key购买 nike

预先感谢您查看我的问题。

我正在创建一个网站,其中有一个 div 列表,可以使用 jQuery UIs 在 Y 轴上进行排序。可排序。
因为我希望它在使用触摸的移动设备上运行,所以我必须添加一些技巧以确保 jQuery UI 可用(因为它目前不支持触摸事件。)。
技巧被称为jQuery UI touch punch。
网站:jQuery UI touch punch .
GitHub: jQuery UI touch punch .

Now comes my problem. Sometimes the list gets so big that the website will get scrollable and when the site is scrollable i cannot properly drag the items since when i try to drag a div it just scrolls the page. The only way i can drag it is when i double tap the item and then drag it.

But this is really not what i want since it is really tedious to use and unnatural.

现在的问题是,是否有一种方法可以在尝试从可拖动集中拖动其中一项时禁用滚动。我尝试在点击时添加 overflow-y: hidden 或添加 touch-action : none。不幸的是,这似乎不起作用。

SUMMARY
What i have: I can currently drag and sort a List of Divs with a touch device using jQuery UI and jquery UI touch punch.
The Problem: The list will get so big that the site is scrollable which disables the dragging with a single tap i need to double tap to drag the item.
What i want: I want to be able to drag the items(without double tapping) even when i have a scrollbar.

我怎么能意识到这样的行为/我应该从什么开始?感谢任何提示和解决方案。


最后但并非最不重要的是我的 FIDDLE .

编辑:

我正在使用:
IE 11
jQuery 版本 1.11.1
jQuery-ui 版本 1.11.4

最佳答案

尝试用以下 JS 片段替换(推荐的)touch punch 库(或除此之外)并调用 $(document).ready(); 上的 init() 函数; :

  • 请注意,您可以在 #wrapper 上评论样式,它们只是为了溢出测试而设置的。
  • 理想情况下,您会在可拖动项目之外留出一些空间,以便滚动时不会出现不需要的拖动。

下面的片段:

$(document).ready(function() {
init();
$("#myContainer").sortable({
//your code
})
});

function touchHandler(event) {
var touch = event.changedTouches[0];

var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent({
touchstart: "mousedown",
touchmove: "mousemove",
touchend: "mouseup"
}[event.type], true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);

touch.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}

function init() {
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}

---> Fiddle with snippet replacing touch punch <---

---> Fiddle with snippet + touch punch <---

(均在移动版 safari 和 chrome 中进行了测试,第一次点击即可实现拖动)

关于javascript - jQuery UI Sortable——当页面可滚动时,Div 不可拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41637086/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com