在鼠标移动时设置Jquery Draggable文本的顶部和左侧？

Posted 2023-05-09

【中文标题】在鼠标移动时设置Jquery Draggable文本的顶部和左侧？

【英文标题】：Set Jquery Draggable text's top and left on mouse move?

【发布时间】：2014-08-24 11:48:44

【问题描述】：

一个自定义网格，其项目是可拖动的，即您可以拖动任何行并将其放到左侧的树结构中。我为 drggable 所做的就是这个

 $("#ulMyItemsNew").append(liItem).find("li").draggable(

                    helper: 'clone',
                    revert: function (event) 
                        //hides tooltip when not a valid drop
                        $(".tooltipProduct:visible").hide();
                        return !event;
                    ,
                    cursor: 'move',
                    start: function (event, ui)      

                        $(this).draggable("option", "cursorAt", 
                            left: event.pageX,
                            top: event.pageY 
                       );


                    ,

                    zIndex: 507000
                );

实际上，当我开始从制造商拖动任何行时，我的鼠标和拖动的文本一起移动。但是当我从型号开始拖动时，我的鼠标和拖动的文本变得距离。当我从描述开始拖动时然后我的鼠标和拖动的文本距离更远。我想要的是，无论我是从制造商还是型号或描述中拖动，拖动的文本应该总是随着我的鼠标移动。它们之间不应该有距离。

代码区我知道

 start: function (event, ui)      

                        $(this).draggable("option", "cursorAt", 
                            left: event.pageX,
                            top: event.pageY 
                       );
                     

我正在做event.pageX 和event.pageY 并且该事件不是鼠标移动事件而是draggable 文本事件。我确实在这样的“开始”帮助器中调用了一个函数

    start: function (event, ui)      

                           GetMousePosition();
    

function GetMousePosition() 
 $("#ulMyItemsNew li.ui-draggable-dragging").mousemove(function (event) 

            var offset = $("#ulMyItemsNew li.ui-draggable-dragging").offset();


            $("#ulMyItemsNew li.ui-draggable-dragging").css( left: event.pageX - offset.left, top: event.pageX - offset.top );


        );

但我想要的没有任何效果 ulMyItemsNew 是 ul id，所有 li 网格的行都存在于该 ID 下。 li.ui-draggable-dragging 是 draggable 文本的类，动态附加在 ul 的底部。

任何帮助将不胜感激。我从 2 周起就陷入了困境。提前致谢！！

这是快照 -

【问题讨论】：

尝试在您的cursor:move 上方添加这个cursorAt: left: 1, top:1 ，然后从start 中删除所有内容。以及为什么有zIndex:507000 尝试添加100。

如果可能，请为您的代码创建一个小提琴

谢谢@Shail Paras。它起作用了。我从一开始就删除了所有内容，并按照您所说的在上面添加了 cursorAt。它工作正常。非常感谢

【参考方案1】：

我认为您在开始拖动时已经固定了光标位置：

$(this).draggable("option", "cursorAt", 
                  left: event.pageX,
                  top: event.pageY 
               );

这就是它发生的原因。

使用这个-

cursorAt:  left: 1, top:1 

用于指定相对于可拖动对象的另一个位置的选项（从顶部、右侧、底部和/或左侧指定一个像素值）。通过为 cursor 选项提供有效的 CSS 光标值来自定义光标的外观：默认、移动、指针、十字准线等。

查看这里了解更多详情

draggable - cursor-style

【讨论】：

@TusharRaj - 我的回答对你没用吗？或者您找到任何其他解决方案。请稍微解释一下或发布您的答案，以便其他人也可以看到正确的答案。

非常感谢 Shail 的友好回复。实际上事情是当我做 $(this).draggable("option","cursorAt", left: 1, top: 1 );然后它工作正常，但仅从第二次拖动开始......最初当我第一次拖动时它的行为就像它一样（从型号拖动时显示距离，从描述拖动时显示更多距离），所以我刚刚删除正如你所说的那样“开始”帮助代码并添加了“cursorAt：left：1，top：1”，它适用于任何时间拖动我想要的。

对于 "left:event.pageX and top:event.pageY" ，我认为 "event" 是那个可拖动的 "li" 事件，而我犯的错误是将 pageX 和 pageY 放在那个事件中实际上破坏了所需的功能。非常感谢:)

【参考方案2】：

我这样做了，它按我的意愿工作。现在我的光标和可拖动的“li”一起移动。我不知道 cursorAt 助手实际上将光标设置为相对于可拖动项目的顶部和左侧。

$("#ulDragNew").append(liItem).find("li").draggable(
                    helper: 'clone',

                    cursorAt: 
                        left: 40,
                        top: 20
                    ,

                    revert: function (event) 
                        //hides tooltip when not a valid drop
                        $(".tooltipProduct:visible").hide();
                        return !event;
                    ,
                    cursor: 'move',



                    zIndex: 100
                );