将 Drag&Drop 与 jsTree 和 DataTables 一起使用

Using Drag&Drop with jsTree and DataTables

本文关键字:DataTables 一起 jsTree Drag amp Drop      更新时间:2023-09-26

我有一个jsTree和一个DataTable。我正在尝试将从树中拖动的节点复制到表中的单元格。这样的事情可能吗?

它甚至不显示警报

这是我的 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
    });
});

有第二棵树(本质上是相同的(,并且在它们之间拖放工作(除非我尝试将子元素放在它自己的父元素之一上,在这种情况下,整个树都会消失,但这不是我现在的主要问题(

我已经在这个线程上尝试了答案,但它仍然没有显示警报。

非常感谢有关如何解决此问题的任何帮助(它不必使用jstree,这只是我碰巧发现的(

当某些东西被放入树本身时,将调用drop回调。要实现您正在尝试的内容,您必须将表格标记为"可放置"并允许在内部拖放元素。这是一个插件,是Jquery UI的一部分。使用此文档来执行此操作..

可放置文档