javascript - Jquery Draggable - center cursorAt Vertically

标签 javascript jquery html draggable

我正在处理我的第一个 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 - highcharts,可能的错误设置工具提示格式化程序和 html?

javascript - Javascript 上的级联下拉菜单

javascript - jstree 从树中获取新的 json 数据

javascript - 基本 RequireJS 帮助 - 如何调用/定义函数?同时使用 onclick 和 jquery

javascript - 在条形图中使用 json url 数据

javascript - 根据受欢迎程度缩放内容标签

javascript - div 类的多个 ajax 响应

javascript - Canvas DrawImage 不适用于 IOS Safari

html - CoreUI 旁边菜单 float 在主菜单上

javascript - 使用 AJAX 在 HTML 中显示 php 结果