(固定高度)div 内的可拖动项目会弄乱 CursorAt 位置
我有以下设置:
<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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
好吧,答案是 CursorAt 将默认为拖动项目的父级,在本例中已更改为 div。
因此更改draggable() 来
解决问题。
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
fixed the problem.