拖动Jquery UI Draggable时定位cursorAt

Question

我希望有人可以帮助我解决这个问题。我认为使用 jQuery Draggable 查找 CursorAt 选项将是一件简单的事情，但也许我遗漏了一些东西。本质上，我想将拖动元素放置在鼠标光标下的左上角或右上角位置。

我希望我能做到：

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

top/left 属性会改变的地方，但它似乎不想工作。

这是我的做法：

$( "#matches ul li:first-child" ).draggable({ 
                            addClasses: true, 
                            snap: true,
                            cursor: "crosshair",
                            start: function(event, ui) {
                                $(this).draggable("option", "cursorAt", {
                                    left: Math.floor(this.clientWidth / 2),
                                    top: Math.floor(this.clientHeight / 2)
                                }); 
                            },
                            drag: function(event, ui) {
                                var dragged = ui.helper;
                                var dragged_data = dragged.data('draggable');
                                var direction = (dragged_data.originalPosition.left > dragged.position().left) ? 'left' : 'right';
                                $( "#matches ul li:first-child" ).removeClass('left right').addClass( direction );
                                if( direction == "left"){
                                     $(this).draggable("option", "cursorAt", {
                                        left: 0,
                                        top:0
                                    }); 
                                }else{
                                     $(this).draggable("option", "cursorAt", {
                                        right: 0,
                                        top:0
                                    }); 

                                }   
                            },                      
                            stop: function(event, ui) {
                                $( "#matches ul li:first-child" ).removeClass('left right');
                            }


                    });

一如既往，提前致谢。

Ps 我也尝试了简单的 top & left 0 并使用 css margin-left: +/- 元素的宽度。

Answer 1

你想要这样的东西吗？ ehttp://jsfiddle.net/deveshz/YvmFf/2/

还是把光标固定在左上角？