jQuery 可拖动错误（元素不符合光标）

Posted 2023-05-08

【中文标题】jQuery 可拖动错误（元素不符合光标）

【英文标题】：jQuery draggable bug (element not in line with cursor)

【发布时间】：2015-09-21 20:02:18

【问题描述】：

编辑：JSFIDDLE：http://jsfiddle.net/h9yzsqfr/

-- 代码：

elem.editor.find("div.ui-widget").draggable(

    handle:"div.content",
    containment:elem.editor,
    snap:"*",
    start: function(e,ui)
    
        $(ui.helper).addClass("dragging");
    ,
    drag: function(e,ui)
    
        checkTop(ui);
        if($(ui.helper).parents("div.lo-content").length > 0)
        
            $(ui.helper).appendTo(elem.editor);
            ui.position =  'top': e.pageY, 'left': e.pageX ;
        
    ,
    stop: function(e,ui)
    
        oldWidget.saveState($(ui.helper),1);
        setTimeout(function() 
            $(ui.helper).removeClass("dragging");
        , 300);
    
);

我在 elem.editor 定义的容器中有一些可拖动的对象；但是我在 div.lo-content 中还有一些其他可拖动对象，它们也在 elem.editor 中。

当 div.lo-content 中的对象被拖动时，它应该重新附加到运行正常的 elem.editor 容器；然而，如下图所示（下图），它并没有将可拖动对象的位置设置为鼠标光标所在的位置。

有什么办法可以解决这个问题？

【问题讨论】：

预期结果是使用js 移动用户光标？

@guest271314 预期的结果是，当将可拖动元素拖出该白框时，该可拖动元素位于光标下方。相反，可拖动元素移动到屏幕的左侧，并且不在光标下方。

“可拖动元素移动到屏幕左侧，并且不在光标下方” 是的，如gif 所述出现。 “预期结果是该可拖动元素在被拖出那个白框时处于光标下” 可以创建stacksn-ps，jsfiddlejsfiddle.net在html文档处重现效果吗？

@guest271314 对不起。这是您的 jsfiddle：jsfiddle.net/h9yzsqfr 因此，一旦将其拖出右侧的容器，请查看元素的去向。如果我理解正确，用户光标应该与可拖动元素串联。

【参考方案1】：

问题在于您的width: 100% 和containment 选项。一旦它附加到主体，它就会保持 100%，但是对于主体，它会变得更小，但 containment 已经被计算出来了。 解决它的一种方法是重置containment。可能有不同的方法可以做到这一点，一种方法可能是这样的：

start: function (e, ui) 

    if ($(this).parents(".inner").length > 0) 

        $(ui.helper).addClass("dragging");
        ui.helper.css(
            'width': '100px',
                'left': '0px',
                'top': '0px'
        );

        ui.helper.data()['ui-draggable'].containment = [0,0,$('body').width(), $('body').height()]

        ui.helper.appendTo("body");
    
,

http://jsfiddle.net/puurqx8r/6/

【讨论】：

非常感谢（删除了我之前的评论 - 找到了解决方案）。我唯一需要添加的是 .containment 行，其他所有内容都保持不变。完美运行。

【参考方案2】：

connectToSortable 这是一个允许将可拖动对象拖放到指定的可排序对象上的选择器。如果使用此选项，则可以将可拖动对象拖放到可排序列表中，然后成为其中的一部分。注意：必须将助手选项设置为“克隆”才能正常工作。需要包含 jQuery UI 可排序插件。

代码示例：

使用指定的 connectToSortable 选项初始化可拖动对象：

$( ".selector" ).draggable(

connectToSortable: "#my-sortable"
 cursorAt:top: 5, left: t

);

【讨论】：

这不是问题。一旦我将它拖到元素上，当我将它拖出时，元素不在光标下方；正如您在 GIF 中看到的那样，它一直位于屏幕左侧。我希望它可以拖到外面，但是一个错误导致它远离光标。

有一个名为 cursorAt 的选项...它可以解决问题...希望对您有所帮助

没用 :(。它仍在播放。jsfiddle.net/h9yzsqfr 看看我在那个 jsfiddle 中的例子，这样你就知道问题出在哪里了。

【参考方案3】：

使用cursorAt: top:, left: 和appendTo: 'body' 在此处查看我的示例答案。

jQuery draggable shows helper in wrong place after page scrolled

【参考方案4】：

我遇到了同样的问题。这是由于使用边距来居中元素造成的。尝试使用绝对位置！

【参考方案5】：

我删除了可拖动对象上的position:absolute