Question

这是我的问题的一个小问题：

基本上，一盒物品比另一箱大得多。因此，使用sortable进行拖放是一项挑战。

首先，我改变了开始时元素的大小

$(function() {
    $( "#sortable1, #sortable2" ).sortable({
       connectWith: ".connectedSortable",
       start: function(event, ui){
           $(ui.item).width($('#sortable2 li').width());
       }               
    }).disableSelection();
});

但是，我不知道如何将调整大小的元素移动到鼠标光标。基本上，如果我点击左侧列表中元素左侧的任何距离，就很难将元素放到较小的列表中。

我试图使用以下方法将元素移动到鼠标位置：

$(ui.item).offset({top: event.pageY, left: event.pageX});

但是，它似乎没有用。

进一步澄清：

（清单1）（清单2） ----------------------------------------- ---

将元素从列表1移动到列表2具有挑战性，因为它们的大小不同。因此，我将列表1中的元素调整为列出2大小。现在，如果你点击

------------------------------------- x --- ---

该元素看起来像

--- _ 的的 __ _ __ _ __ _ __ _ __ _ __ _ __ x __ ---

其中x表示鼠标位置。基本上，我想将元素移动到鼠标位置以使拖动更容易列出2

有什么建议吗？谢谢！

编辑：对不起，我没有足够的代表发布图片，但是......

[ _ __ _ __ _ __ _ __ _ __ _ __ _ _] （点击前）

[ _ _] -------------------- x（点击x标记的位置点击）

我基本上想要将现在较小的元素移动到与鼠标相同的位置。

再次感谢！

Answer 1

在可排序元素

的选项中添加tolerance:"pointer",

这里是小提琴：http://jsfiddle.net/Yc9WY/55/

编辑：

在可排序元素

的选项中添加cursorAt: { top:0, left: 0 },

它会将项目置于指针

下

这里是小提琴：http://jsfiddle.net/Yc9WY/57/

Answer 2

我发现这个解决方案完美无缺：

$("ul.sortable").sortable({
    placeholder: "highlight",
    start: function(event, ui) {
       // Resize elements
       $(this).sortable('refreshPositions');
    }
});

来源： http://forum.jquery.com/topic/reducing-the-size-of-elements-before-sorting-them-using-sortable

在拖动JQuery UI上更改可排序元素的大小

2 个答案: