使用拖放与jsTree和DataTables [英] Using Drag&Drop with jsTree and DataTables

问题描述

我有一个 jsTree 和一个 DataTable 。我正在尝试将我从树中拖动的节点复制到表中的单元格。是否可以这样做？

I've got a jsTree and a DataTable. I'm trying to copy nodes that I've dragged from my tree to a cell in my table. Is something like that possible at all?

甚至不显示警报

这是我的html：

<li id="tree1" class="jstree-draggable">

</li>

<table id="table">
    <thead>
        <tr>
            <th>1 Column</th>
            <th>2 Column</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

这是我的js：

$(document).ready(function() {

    $("#tree1").jstree({
        // List of active plugins
        "plugins" : ["themes", "html_data", "dnd"],
        "html_data" : {
            "data" : "<li id='root'><a href='#'>Parent node</a><ul><li><a href='#'>Child node</a></li></ul></li>"
        },
        "themes" : {
            "theme" : "default",
            "dots" : true,
            "icons" : true
        },
        "dnd" : {
            "drop_finish" : function() {
                alert("DROP");
            },
            "drag_check" : function() {

            },
            "drag_finish" : function (data) {
                alert("DRAG FINISH");
            }
        },
        "core" : {
            "initially_open" : ["root"]
        }
    });

    $('#table').dataTable({
        "bPaginate" : false,
        "bSort" : false,
        "bInfo" : false,
        "bFilter" : false
    });
});

我有一个第二个树（基本上是一样的），拖动&两人之间的工作（除非我尝试将一个子元素放在其父元素之一上，在这种情况下，整棵树消失，但现在不是我的主要问题）

I've got a second tree (which is essentially the same) and drag & drop between the two of them works (unless I try to drop a child element on one of its own parent elements in which case the whole tree disappears but that is not my main issue right now)

我已经尝试了这个线程的答案，但仍然没有甚至显示警报。

I have tried the answer on this thread but it still didn't even show the alerts.

任何有关如何解决这个问题的帮助都非常感谢（它不必使用jstree，这只是我碰巧找到的） / p>

Any help on howto solve this problem is greatly appreciated (it doesn't have to use jstree, it's just what I happened to find)

推荐答案

当树中的东西被丢弃时，调用drop回调。
来实现你正在尝试的必须将您的表标记为可下载，并允许在...中拖放元素
这是一个插件，它是Jquery UI的一部分。
使用此文档来执行此操作。

The drop callback is called when something is dropped inside the tree itself .. to achieve what you are trying you have to mark your table as "droppable" and allow dragging and dropping elements inside .. This is a plugind that is part of Jquery UI . use this documentation to do that ..

可卸载文档

这篇关于使用拖放与jsTree和DataTables的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！