Examples to explain how jQuery uses the zTree plug-in to implement drag-and-drop functionality

Among the tree plug-ins I have come across so far, I think zTree is relatively simple and easy to use. One business requirement was to group certain objects into groups. Objects on the tree could be dragged and dropped at will, which was equivalent to changing the grouping of objects. Therefore, I used zTree and conducted some studies on it. This article mainly introduces the example of js using the zTree plug-in to implement a draggable tree. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

First download the relevant packages required by zTree, and attach the official download link: zTree download. After introducing the relevant files, you can build zTree. First add the ul tag to the page, then add the id to the tree, the calss is ztree, and the front-end page is completed.

Note: All the codes below are written according to my own needs and are incomplete. Just refer to the configuration process and the use of callback functions.

Front-end page:

 <ul id="modelTree" class="ztree"></ul>

Then write JavaScript. Before writing, you must read the official API of zTree. It has been explained in detail above. , just follow step by step. The first is to configure the setting. This is the core configuration of the entire zTree. In addition to the basic configuration, because I need the drag and drop function, I configured edit, in which enable must be set to true. Other parameters depend on the required configuration. Related callback functions are also configured in callback.

Setting configuration:

 var setting = {
 data: {
  key:{
   name:'nodeName'
  },
  simpleData: {
   enable: true,
   idKey: 'nodeId',
   pIdKey: 'parentNodeId'
  },
  keep:{
   leaf:true,
   parent:true,
  }
 },
 edit:{
  drag:{
   isCopy: false,
   isMove: true,
   prev: true,
   next: true,
   inner: true,
   autoOpenTime: 0,
   minMoveSize: 10


  },
  enable:true,
  editNameSelectAll: true,
  removeTitle: "删除节点",
  renameTitle: "编辑节点名称",
  showRemoveBtn: false,
  showRenameBtn: false,
 },

 callback: {
  beforeClick: beforeClick,

  beforeDrag:beforeDrag,
  beforeDragOpen:beforeDragOpen,
  beforeDrop:beforeDrop,
  onDrag:onDr},
};

After configuring the setting, complete the callback functions and determine the content according to the needs. Here I am based on The type of the parent node and some other rules impose corresponding restrictions on whether dragging can be performed and whether dragging can be successful.

Callback function:

 //拖拽之前调用的函数
function beforeDrag(treeId,treeNode){
 if(treeNode[0].nodeType == 'GROUP'){
  return false;
 }
 if(treeNode.parentId == null && treeNode.modelType !=null){
  return true;
 }
 var node = treeNode[0].getParentNode();
 var modelType = treeNode[0].getParentNode().modelType;
 if(modelType == 'INTERFACE'){
  return false;
 }else {
  return true;
 }
}

//预留被拖拽的回调函数
function onDrag(event, treeId, treeNode){
 //暂时没用到
}

//拖拽移动到展开父节点之前调用的函数
function beforeDragOpen(){
 return true;
}

//拖拽操作结束之前调用的函数
function beforeDrop(treeId, treeNode, targetNode, moveType){
 BRS.fileLoading('show');
 var result = false;
 if(targetNode == null || (moveType != "inner" && !targetNode.parentTId)){
  BRS.fileLoading('hide');
  return false;
 }
 if(targetNode.modelType != null){
  if((targetNode.modelType == 'INTERFACE' && moveType == 'inner') || targetNode.getParentNode().modelType == 'INTERFACE'){
   BRS.fileLoading('hide');
   return false;
  }
 }
 var objDetail = {
  url: '/api/model/' + treeNode[0].id,
  async:false,
 }
 jsonAjax(objDetail,function (detailData) {
  var data = {
   nodeType : detailData.nodeType,
   code : detailData.code,
   name : detailData.name,
   builtIn : detailData.builtIn,
   iconUrl : detailData.iconUrl,
   modelType : detailData.modelType.code,
   interfaceModelId : detailData.interfaceModelId,
  };
  data.id = treeNode[0].id;
  if(moveType != 'inner'){
   data.groupId = targetNode.parentId;
  }else{
   data.groupId = targetNode.id;
  }
  var obj = {
   type:"put",
   showSuccessMsg: false,
   param: {
    params:JSON.stringify(data)
   },
   async:false,
   url: '/api/model',
  }
  jsonAjax(obj,function(updateData){
   if(updateData != null){
    result = true;
  ing('hide');
 return result;
}

//预留拖拽结束的回调函数
function onDrop(event, treeId, treeNode, targetNode, moveType){
 befod('hide');
 return result;
}

//预留拖拽结束的回调函数
function onDrop(event, treeId, treeNode, targetNode, moveType){
 beforeClick(treeId, treeNode[0]);
}

After the above settings and related functions are completed, you can call the initialization method of zTree and return it through Ajax request Parameters to fill in the tree we need.

// 初始化对象分组树
 var treeObj = $("#modelTree");
 $.fn.zTree.init(treeObj, setting, data);
 zTree_Menu = $.fn.zTree.getZTreeObj("modelTree");

The final tree formed (can be dragged):

Related recommendations;

zTree plug-in multi-select drop-down menu example code_javascript skills

jQuery uses zTree plug-in to implement tree menu and asynchronous loading_jquery

ZTree plug-in drop-down tree usage tutorial_javascript skills

The above is the detailed content of Examples to explain how jQuery uses the zTree plug-in to implement drag-and-drop functionality. For more information, please follow other related articles on the PHP Chinese website!