这是我的问题的一个 fiddle :
本质上,一箱元素比另一箱大得多。因此,使用 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 标记位置点击)
我基本上想将现在较小的元素移动到与鼠标相同的位置。
再次感谢!
最佳答案
在可排序元素的选项中添加tolerance:"pointer",
这是 fiddle :http://jsfiddle.net/Yc9WY/55/
编辑:
在可排序元素的选项中添加cursorAt: { top:0, left: 0 },
它将元素定位在您的指针下
这是 fiddle :http://jsfiddle.net/Yc9WY/57/
关于jquery - 在拖动 JQuery UI 时更改可排序元素的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11085983/