jQuery可拖动+可排序:奇怪的鼠标偏移行为

Posted

技术标签:

【中文标题】jQuery可拖动+可排序:奇怪的鼠标偏移行为【英文标题】:jQuery draggable + sortable: strange mouse offset behaviour 【发布时间】:2010-11-17 20:09:06 【问题描述】:

我有

元素的可拖动列表,我可以将它们拖动到另一个空的 元素中。如果我拖动可拖动原始 的第一个 元素,一切正常...

问题:

...但是当我拖动该列表的任何其他

元素时,只要我越过接收可排序 的边界,“助手”就会从鼠标指针移开。更准确地说,它会上升到列表的顶部。

有没有人看到这个并知道解决方案? 好吧,我的问题是,我只是在使用 jquery,并没有真正深入了解它,也从未真正深入使用过 javascript

有关问题的更多信息:

我的 jQuery 代码:

$(document).ready(function() 
    $('#roleList > li').draggable(
        connectToSortable: '#roleDrop',
        containment: '#container',
        revert: 'invalid'
    );                   
    $('#roleDrop').sortable(
        cursor: 'move',
        containment: '#container',
        revert: true,
        update: function() 
            var order = $('#roleDrop').sortable('serialize');
            $.ajax(
                type: 'POST',
                url: '".$postUrl."',
                dataType: 'html',
                data: order
            );
                                  
    );
    $('#roleList').disableSelection();
);

虽然#roleList 和#roleDrop 是上述无序列表,但#container 是一个表。

现在是发生了什么的屏幕截图。

我开始拖动项目:

http://drop.io/download/public/dkabw5hlq3yfm0f84yji/7bf91122adc241373a5da13b5bde4b231644c1c5/da142000-ff76-012b-41ee-f10bc9db08a6/5a1bfa70-68f6-012c-6d08-f2025930ce6a/v2/thumbnail_large

当我越过第二个

的边界时,助手会跳起来。

http://drop.io/download/public/dkabw5hlq3yfm0f84yji/2fad1d633d38cf593da46c638d1930431ea5fd35/da142000-ff76-012b-41ee-f10bc9db08a6/5c65c4c0-68f6-012c-6601-f12da00d9d47/v2/thumbnail_large

如果您也需要 xhtml 标记,请告诉我。

【问题讨论】:

请发布您的 Javascript/JQuery 和相关的 HTML 代码。如果您可以将问题隔离在单独的 HTML 文件中并剪切和粘贴整个内容,那将是理想的。 好的,我明天再做,现在想都晚了…… 添加了jQuery和截图! XHTML 标记会很有帮助。 收容措施可能会导致问题。需要查看标记,尤其是对于那个#container 元素。到测试页的链接会更好。 【参考方案1】:

尝试将helper: 'clone' 添加到您的.draggable 选项中:

$('#roleList > li').draggable(
    helper: 'clone',
    connectToSortable: '#roleDrop',
    containment: '#container',
    revert: 'invalid'
);                   

根据the jQuery documentation,您应该在将可拖动对象连接到可排序对象时设置此选项。

虽然这会产生不同的界面体验(拖动的项目被克隆而不是移动),但对于文档所暗示的已知问题,它至少是一种临时解决方法。额外的事件处理可以在 #roleDrop 更新回调期间从 #roleList 中清除原始项目。

【讨论】:

以上是关于jQuery可拖动+可排序:奇怪的鼠标偏移行为的主要内容,如果未能解决你的问题,请参考以下文章

php页面刷新时Mysql可拖动位置重置

JQuery 可排序和可拖动的行为

仿苹果返回首页按钮(移动端div拖动 返回首页)

onclick clone() 在容器的 x&y=0 处可拖动以避免任何偏移

用jQuery实现拖动

Google Maps API - 奇怪的地图“偏移”行为