jquery.ztree实现可拖拽树形目录修改删除拖拽效果代码-html代码-BFW代码库

jquery.ztree实现可拖拽树形目录修改删除拖拽效果代码

代码语言：html

所属分类：拖放

代码描述：jquery.ztree实现可拖拽树形目录修改删除拖拽效果代码，可以根据json数组生成一个树状多级菜单目录与文件，可以拖拽目录和文件到不同的父目录。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/zTreeStyle.css">

</head>

<body>
    <ul id="treeDemo" class="ztree"></ul>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
   <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.ztree.all.js"></script>
    <script>
        var newNode;
        function zTreeOnDrag(event, treeId, treeNodes) {
          var treeObj = $.fn.zTree.getZTreeObj("tree");
          console.log('hahah', treeNodes);
        
        };
        
         
  function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {
        if (targetNode.folder) {
            return true;
        }
        return false;
    }
   

    function beforeDrag(treeId, treeNodes) {
       // for (var i = 0, l = treeNodes.length; i < l; i++) {
         //   if (treeNodes[i].token == "3") {
          //      return false;
           // }
      //  }
        return true;
    }
        function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
          console.log("------------------------");
          console.log("event", event);
          console.log("treeId", treeId);
          console.log("treeNodes", treeNodes);
          console.log("targetNode", targetNode);
          console.log("moveType", moveType);
          console.log("isCopy", isCopy);
          console.log("------------------------");
          zTreeObj.moveNode(newNode[0], treeNodes[0], 'inner');
          //targetNode 为null时，drop处为根节点
     .........完整代码请登录后点击上方下载按钮下载查看