我正在处理我的第一个 JQuery 项目,但遇到了一些障碍。我正在尝试允许对一组嵌套列表 (ul) 进行拖放重新排序。除定位外,一切正常。目标是使可拖动对象相对于光标垂直居中(水平移动受到限制),以便可以轻松删除嵌套在其中的元素的 li。这是相关的 JS:
$(function() {
$( ".organizerlink" ).draggable({ axis: "y",
containment:"#organizer",
scroll: false ,
helper: "original",
revert: "invalid",
cursorAt: { top: Math.round($(this).outerHeight() / 2)}
});
和 HTML:
<ul id="organizer">
<li class="organizerTarget"> </li>
<li class="organizerlink" id="dbid-1">Page
<ul><li class="organizerTarget organizerNewParent"> </li></ul>
</li>
<li class="organizerTarget"> </li>
<li class="organizerlink" id="dbid-2">About
<ul>
<li class='organizerTarget'> </li>
<li class='organizerlink' id="dbid-3">Another Page<ul><li class="organizerTarget organizerNewParent"> </li></ul></li>
<li class='organizerTarget'> </li>
<li class='organizerlink' id="dbid-4">Example<ul><li class="organizerTarget organizerNewParent"> </li></ul></li>
</ul>
</li>
<li class="organizerTarget"> </li>
<li class="organizerlink" id="dbid-27">Stuff
<ul><li class="organizerTarget organizerNewParent"> </li></ul>
</li>
一些我已经尝试过的东西:
- 将 cursorAt 设置为 $(this).height() - 没有用,我猜 height() 拉入了 css 高度,但它们没有明确定义,所以它跳到 0
- 将它设置为 outerHeight() 在 firebug 中给我一个错误“elem.style is undefined”
我知道 outerHeight 元素存在于 jquery 中,并且基于 API doc看起来它可以自动计算,即使 CSS 未定义,所以我认为这是正确的方法,也许 $(this) 只是寻找它的错误位置。
最佳答案
我还想在拾取可拖动对象后将它们居中。我的解决方案:
$(".dragme").draggable({
start: function(event, ui) {
$(this).draggable("option", "cursorAt", {
left: Math.floor(this.clientWidth / 2),
top: Math.floor(this.clientHeight / 2)
});
}
});
关于javascript - Jquery Draggable - center cursorAt Vertically,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5750302/