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

时间:2011-03-11 12:17:41

标签: jquery html height draggable scrollable

我有以下设置:

<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的固定高度搞乱了克隆元素的位置......任何想法我怎么能解决这个问题?

1 个答案:

答案 0 :(得分:1)

好的,答案是CursorAt将默认为拖动项目的父项,在这种情况下已更改为div。

所以将draggable()更改为

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

修复了问题。