如何在拖动时将JQuery UI Sortable项目放置在鼠标光标处？

Question

I'm using Jquery sortable to reorder items. In my GUI I have a traschan icon where sort items can be thrown away. The trashcan is a droppable area.

Now, when the sort item helper hovers over the droppable area I change it's size to give the user the visual feedback that it's possible to throw it away. But I would also like to reposition the sort item helper so it aligns with the mouse cursor.

I tried:

$(trashcan)
    .droppable(
    {
        over: function (event, ui)
        {
            ui
                .draggable
                .css("transform", "scale(0.2)")
                .sortable("option", "cursorAt",
                {
                    left: 5,
                    top: 5
                });
        }
    });

But I only get the following js error: Error: cannot call methods on sortable prior to initialization; attempted to call method 'option'

Answer 1

You're calling the option method on an element before initializing it as sortable.

try

element.draggable()
    .sortable({ cursorAt: { left: 5, top: 5 } }); // pass the options while initializing

or if it is not possible for some reason, try

element.draggable()
    .sortable(); //initialize first

element.sortable("option", "cursorAt", // then call option method
    {
        left: 5,
        top: 5
    });

Answer 2

You can add the helper: 'clone' option to your sortable instance. If, for whatever reason you cannot use clone, then the only way to fully solve this problem, and have the mouse cursor always be where you click on the item (instead of the item floating away), is this:

element
    .sortable({ ... })
    .find('.handle').mousedown(function(event) {
        element.sortable('option', 'cursorAt', {left:event.offsetX, top:event.offsetY});
    });