(固定高度)div 内的可拖动项目会弄乱 CursorAt 位置

发布于 2024-10-21 04:08:02 字数 793 浏览 1 评论 0原文

我有以下设置:

<asp:treeview cssclass="draggable"><items...>  <table />

我将其设置为能够使用 jQuery 将项目从树视图拖动到表中:

 $(".draggable").draggable({ helper: "clone", cursorAt: { left: -10, top: -10} }) 

因此,在拖动时,克隆意味着保持在当前鼠标位置下方一点,以便更容易用户。

但是,当打开的节点将树视图推到简单的内容页面之外时,我现在需要使树视图可(垂直)滚动,否则拖放对用户来说变得太困难。

就这个程度而言,我在树视图周围放置了一个可滚动的 div,如下所示:

<div style="padding-right: 20px; overflow: auto; overflow-x: hidden; height: 300px;"> <asp:treeview cssclass="draggable"><items...></div>  <table />

这按预期工作,但现在的问题是 - 拖动时 - 克隆的元素不再位于鼠标位置的正下方,而是向下,这对于用户来说当然是非常混乱的。

我尝试删除 Draggable() 方法的“cursorAt”属性,但这没有帮助。

所以看起来 div 的固定高度弄乱了克隆元素的位置...知道如何解决这个问题吗?

I have the following setup:

<asp:treeview cssclass="draggable"><items...>  <table />

And I set it up to be able to drag items from the treeview to the table, using jQuery:

 $(".draggable").draggable({ helper: "clone", cursorAt: { left: -10, top: -10} }) 

So while dragging, the clone is meant to stay a little underneath the current mouse position, to make it easier for the user.

However, I now need to make the treeview scrollable (vertically) when the open nodes would push it beyond a simple page of content, otherwise drag-and-drop becomes too hard for the users.

To this extent, I've put a scrollable div around the treeview, as follows:

<div style="padding-right: 20px; overflow: auto; overflow-x: hidden; height: 300px;"> <asp:treeview cssclass="draggable"><items...></div>  <table />

This works as expected, but the problem is now that - while dragging - the cloned element is no longer just below the mouse position, but instead way down, which is of course very confusing for the user.

I've tried removing the "cursorAt" property of the draggable() method, but this doesn't help.

So it seems the fixed height of the div is messing up the position of the cloned element... any idea how I can fix this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

鸵鸟症 2024-10-28 04:08:03

好吧,答案是 CursorAt 将默认为拖动项目的父级,在本例中已更改为 div。

因此更改draggable() 来

 $("draggable").draggable({ helper: "clone", appendTo:'body', cursorAt: { left: -10, top: -10} }) 

解决问题。

Ok, the answer was that CursorAt will default to the parent of the dragged item, which in this case had changed to a div.

So changing the draggable() to

 $("draggable").draggable({ helper: "clone", appendTo:'body', cursorAt: { left: -10, top: -10} }) 

fixed the problem.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文