jQuery / jQueryUI Droppable采用Draggable的形状

时间:2013-02-12 11:01:17

标签: jquery html css jquery-ui

我有一个列表,其中每个单元格都是一个可接受某个类的可拖动的droppable。这个表的边框是可见的,但我不希望固定大小的单元格有颜色和可见,这看起来很难看。当我将一个拖动拖动到一个单元格的交叉点时,该单元格会突出显示,这并不难,但我也希望这个突出显示采用可拖动的大小。所有可拖动的都是固定宽度,但有些比其他更高,所以适应高度就足够了,但我不知道从哪里开始。 Here是我正在寻找的那种适应的一个例子。

1 个答案:

答案 0 :(得分: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");
    }
});