4

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

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 标记单击的位置）

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

再次感谢！

4

2 回答 2

7

添加tolerance:"pointer",可排序元素的选项

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

编辑 ：

cursorAt: { top:0, left: 0 },在可排序元素的选项中添加

它会将项目定位在您的指针下

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

于 2012-06-18T15:39:41.353 回答
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

于 2013-05-09T03:54:15.800 回答