Question

我使用Jquery sortable来重新排序项目。在我的GUI中，我有一个traschan图标，可以丢弃排序项。垃圾桶是一个可放置的区域。

现在，当排序项目帮助程序悬停在可放置区域上时，我会更改它的大小，以便为用户提供可以将其丢弃的视觉反馈。但我还想重新定位排序项帮助程序，使其与鼠标光标对齐。

我试过了：

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

但我只得到以下js错误： 错误：在初始化之前无法调用sortable上的方法;试图调用方法＆＃39;

Answer 1

在将元素初始化为可排序之前，您在元素上调用option方法。

试

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

或者如果由于某种原因不可能，请尝试

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

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

Answer 2

您可以将helper: 'clone'选项添加到可排序的实例中。如果由于某种原因你无法使用clone，那么完全解决这个问题的唯一方法就是让鼠标光标始终在你点击项目的地方（而不是浮动的项目），这是：

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

在拖动时如何在鼠标光标处定位JQuery UI可排序项？

2 个答案: