JQuery将Column拖动到新表并在特定位置添加到Row

时间:2014-04-24 07:26:00

标签: jquery drag-and-drop

我有多个表,我希望能够将列从一个表拖到另一个表。该列应添加到当前位置的行中。 现在我这样做了:

<script type="text/javascript">//<![CDATA[ 
    $(window).load(function () {
        $(init);
        function init() {
            $("td").draggable({
                start: handleDragStart,
                cursor: 'move',
                revert: "invalid",
            });
            $("tr").droppable({
                drop: handleDropEvent,
                tolerance: "touch",
            });
        }
        function handleDragStart(event, ui) {
            $(this).css('z-index', 9999);
        }
        function handleDropEvent(event, ui) {
            $(this).append(ui.draggable);
            ui.draggable.position({ of: $(this), my: 'right top', at: 'right top' });
            ui.draggable.css('z-index', 0);
        }
    });//]]>  

</script>

这可行,但它总是会在行的末尾添加列(因为右上角位置),现在我真正想要的是,如果droppable表中有2列我也可以放置在这两列之间拖动列。

我有什么想法可以管理它?

1 个答案:

答案 0 :(得分:1)

我通过使用“之前”和“之后”函数并附加纯HTML代码来解决这个问题。

类似的东西:

$(ctrl).parent().before('<div class="content"><div class="cellBefore"></div><div class="cell"><div class="handleCell"></div>' + ui.draggable[0].innerHTML + '</div><div class="cellAfter"></div></div>');

我想知道为什么我没有得到任何答案......