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

Question

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

http://jsfiddle.net/Yc9WY/52/

基本上,一盒物品比另一箱大得多.因此,使用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/