在拖动 JQuery UI 时更改可排序元素的大小答案

【问题标题】：Change Size of Sortable Element on drag JQuery UI在拖动 JQuery UI 时更改可排序元素的大小
【发布时间】：2012-06-20 14:35:21
【问题描述】：

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

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

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

再次感谢！

【问题讨论】：

标签： jquery css jquery-ui jquery-ui-sortable

【解决方案1】：

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

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

编辑：

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

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

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

【讨论】：

这绝对可以让它发挥作用。但是，为了用户界面，是否也可以将对象移动到鼠标上？本质上，如果您有一个大框，然后单击右侧，它会重新调整大小，但鼠标将不再位于它上面：/
请将此问题标记为已回答，如果对您有帮助，请点赞此答案

【解决方案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

【讨论】：