jQuery/jQueryUI Droppable 采用 Draggable 的形式

Posted 2023-05-08

【中文标题】jQuery/jQueryUI Droppable 采用 Draggable 的形式

【英文标题】：jQuery/jQueryUI Droppable take the shape of Draggable

【发布时间】：2013-01-27 16:00:21

【问题描述】：

我有一个单列表，其中每个单元格都是一个可放置的对象，可以接受某个类的可拖动对象。该表的边框是可见的，但我不希望固定大小的单元格着色和可见，这对我来说看起来很丑。当我拖动一个可拖动对象与一个单元格相交时，该单元格会突出显示，这并不难做到，但我也希望这个突出显示能够占用拖动对象的大小。所有可拖动对象的宽度都是固定的，但有些对象的高度比其他对象高，因此调整高度就足够了，但我不知道从哪里开始。 Here 是我正在寻找的适应类型的一个例子。

【问题讨论】：

我在猜测您的问题，但我需要查看一些代码才能理解。你能提供你的代码，还是用 jsfiddle 描述它？

【参考方案1】：

根据您的要求，我建议您使用 jQueryUI "Sortable" 而不是 Draggable/Droppable。 查看portlets demo on the jQueryUI site ，它应该是您正在寻找的功能。

编辑：@Subhamoy，我现在明白你的意思了。 这是一个使用 Sortable 并依赖 CSS 构建表格的解决方案： Link to jsfiddle

关键部分是负责调整占位符大小的“over”处理程序：

$( ".target .tbody" ).sortable(
    forcePlaceholderSize: true,
    placeHolder: "ui-sortable-placeholder",
    connectWith: ".source .tbody",
    items: "> .tr",
    over: function(event, ui) 
        var $context = $(this)
            ,$h = ui.helper
            ,$p = $('.ui-sortable-placeholder', $context)
            ,hheight = $h.height()
        ;
        $p.removeAttr("style");
        $p.css("height", hheight + "px");
    
);

【讨论】：

我看不出来，因为不管可拖动的高度是多少，勾勒的可放置区域总是一样的。

@SubhamoySengupta，我已链接到一个 jsfiddle，希望能满足您的要求。

这太棒了，正是我想要的。非常感谢您，我很抱歉花了这么长时间才接受它。我有一个附带问题。这可以使用固定的页眉或页脚单元格并且列不可排序，以便添加到可放置列仅发生在底部而不是随机位置？

关于你的附带问题：你的意思是像：jsfiddle.net/martyk/LVyuu/4 吗？

不完全是。拖放一个可拖动对象后，您可以在其上方放置另一个可拖动对象。添加应该只从底部发生。我猜这是因为它们是可排序的。