Question

一个自定义网格，其项目是可拖动的，即您可以拖动任何行并将其拖放到左侧树结构。我为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文本事件。我确实在＆＃34;内部调用了一个函数。开始＆＃34;像这样的帮手

    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行都存在于其中。 li.ui-draggable-dragging是draggable文本的类，它会动态附加在ul的底部。

非常感谢任何帮助。我被困在这2周了。在此先感谢!!

这是Snap Shot -

enter image description here

Answer 1

我认为您在开始拖动时修复了光标位置：

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

这就是为什么会这样。

使用此 -

cursorAt: { left: 1, top:1 }

选项指定相对于draggable的另一个位置（指定顶部，右侧，底部和/或左侧的像素值）。通过为游标选项提供有效的CSS游标值来自定义游标的外观：default，move，pointer，crosshair等。

点击此处查看更多详情

draggable - cursor-style

Answer 2

我做了这个，它按照我想要的方式工作。现在我的光标和可拖动的＆＃34; li＆＃34;一起移动。我不知道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
                });
            }

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

2 个答案: