草庐IT

javascript - Jquery Draggable - center cursorAt Vertically

coder 2023-08-07 原文

我正在处理我的第一个 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">&nbsp</li>
<li class="organizerlink" id="dbid-1">Page
    <ul><li class="organizerTarget organizerNewParent">&nbsp;</li></ul>
</li>
<li class="organizerTarget">&nbsp</li>
<li class="organizerlink" id="dbid-2">About
    <ul>
        <li class='organizerTarget'>&nbsp;</li>
        <li class='organizerlink' id="dbid-3">Another Page<ul><li class="organizerTarget organizerNewParent">&nbsp;</li></ul></li>
        <li class='organizerTarget'>&nbsp;</li>
        <li class='organizerlink' id="dbid-4">Example<ul><li class="organizerTarget organizerNewParent">&nbsp;</li></ul></li>
    </ul>
</li>
<li class="organizerTarget">&nbsp</li>
<li class="organizerlink" id="dbid-27">Stuff
    <ul><li class="organizerTarget organizerNewParent">&nbsp;</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/

有关javascript - Jquery Draggable - center cursorAt Vertically的更多相关文章

随机推荐