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

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

这是我的问题的一个 fiddle :

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 标记位置点击)

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

再次感谢!

最佳答案

在可排序元素的选项中添加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/

相关文章:

jquery ui 选项卡在 .tabs() 初始化后更改内容

javascript - jquery滚动并单击div外部并隐藏div?

jquery - 使用 jQuery 在 Bootstrap Multiselect 中选择默认值

jquery - 使用 jQuery UI 在滚动区域中可拖动

css - 快速 CSS 查询

html - 在子悬停时影响父 div

jquery - 如果选项尚不存在,如何从搜索中将选项添加到引导选择?

jQueryparentsUntil() id 被发现

javascript - jQuery 分页下一个和上一个按钮不起作用

html - CSS 滑动窗口圆 Angular 按钮 : how to avoid the "dead" area on right side of "window"?