可拖动/可排序助手大小

Question

我想知道是否有人可以帮助我解决这个 jquery 可拖动可排序问题？我有一些连接到一些可排序列表的可拖动对象。当可拖动助手位于可排序并且可排序占位符可见时，我希望可拖动助手更改宽度（理想情况下动画）为可排序区域的正确宽度。现在高度可以保持不变我只希望可拖动的辅助宽度与可排序的占位符宽度匹配。

JSBin 文件示例 (http://jsbin.com/oHeGexa/5/edit)。所以假设我拖动绿色方块，当它被拾起时，它的宽度和高度是 40px。当它移动到第一个可排序区域（即 150 像素）时，绿色方块变为 150 像素宽。当它移动到第二个可排序区域时，它会再次调整大小为 250px，这是可排序的大小，并且在移动到这些区域时会不断改变大小。

我似乎无法解决这个问题，因为我不知道如何从 sortable over 方法中访问可拖动助手。

我也无法在 Google 上找到答案。谁能指出我正确的方向。

Answer 1

这是一个例子。

$(".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 函数在最初悬停在可排序对象上时不会触发。只有在一个可排序的正方形被删除之后，才会调用over 函数。更复杂的事情是UI 对象是不同的，这取决于over 是从draggables 还是sortables 调用的。

当从 sortable 中拖动时，ui.sender.width() 在悬停在不同的 sortable 上时不会改变。

无论如何，这是一个开始。不用说，如果您希望它工作，以便您可以将块拖动到其他可排序对象，并在块已经位于需要更多工作的可排序区域时重新调整大小。我会进一步研究它，但它并不容易弄清楚。