可拖动/可排序的帮助程序大小

时间:2013-11-21 09:18:07

标签: jquery jquery-ui

我想知道是否有人可以帮我解决这个jquery可拖动的可排序问题?我有一些连接到某些可排序列表的拖拽。当可拖动助手超过可排序且可排序占位符可见时,我希望可拖动助手更改宽度(理想情况下为动画)为可排序区域的正确宽度。现在高度可以保持不变我只想让可拖动的辅助宽度与可排序的占位符宽度相匹配。

JSBin文件示例(http://jsbin.com/oHeGexa/5/edit)。所以我可以说我在拾取时拖动宽度和高度为40px的绿色方块。当它在第一个可排序区域(150px)上移动时,绿色方块变为150px宽。当它移动到第二个可排序区域时,它会再次调整为250px,这是可分类的大小,并在移动区域时不断改变大小。

我似乎无法解决这个问题,因为我不知道如何从可排序方法中访问可拖动帮助程序。

我也无法在Google上找到答案。任何人都可以指出我正确的方向。

1 个答案:

答案 0 :(得分:3)

这是一个例子。

$(".dragMe").draggable({
    cursor: "crosshair",
    connectToSortable: ".sortMe",
    helper: "clone"
});

$(".sortMe").sortable({
    connectWith: "",
    forcePlaceholderSize: true,
    over: function(e, ui){ 
        ui.helper.width(ui.sender.width()-10); 
        ui.item.width(ui.sender.width()-10);
    }
});

http://jsbin.com/oHeGexa/7/edit

你会注意到一旦可拖动进入


我必须对您的初始代码进行一些修改才能使其正常工作,因为。

设置connectWith:".sortMe"时,over函数在最初悬停在sortables上时不会触发。只有在一个正方形中放入一个正方形后,才会调用over函数。更复杂的是,UI对象的不同取决于是over还是draggables调用sortables

从可排序列表中拖动时,将ui.sender.width()悬停在不同的可排序列表上时不会发生变化。

无论如何这是一个开始。毋庸置疑,如果您希望它能够正常工作,那么您可以将块拖动到其他可排序项,并在块已经处于可以进行更多工作的可排序区域时重新调整大小。我会再研究一下,但要弄清楚并不容易。