From 0115f63e12163441aeeaec9f02e677c26fcc9f14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20ELIE?= Date: Sat, 21 Feb 2026 12:29:24 +0100 Subject: [PATCH] dragndrop --- js/README.dragndrop | 3 + js/jquery.ztree.exedit.js | 479 ++++++++++++- js/jquery.ztree.exedit.js_orig | 1207 ++++++++++++++++++++++++++++++++ js/jquery.ztree.exedit.min.js | 2 +- js/ztree-touch-dragdrop.js | 477 +++++++++++++ 5 files changed, 2166 insertions(+), 2 deletions(-) create mode 100644 js/README.dragndrop create mode 100644 js/jquery.ztree.exedit.js_orig create mode 100644 js/ztree-touch-dragdrop.js diff --git a/js/README.dragndrop b/js/README.dragndrop new file mode 100644 index 0000000..7579dac --- /dev/null +++ b/js/README.dragndrop @@ -0,0 +1,3 @@ +I add the content of ztree-touch-dragdrop.js at the end of jquery.ztree.exedit.js and minify it. +The drag'n drop is new available on mobile. +François Elie diff --git a/js/jquery.ztree.exedit.js b/js/jquery.ztree.exedit.js index cfa83ba..98b6485 100644 --- a/js/jquery.ztree.exedit.js +++ b/js/jquery.ztree.exedit.js @@ -1204,4 +1204,481 @@ } return (!root.curEditNode) && (_uCanDo ? _uCanDo.apply(view, arguments) : true); } -})(jQuery); \ No newline at end of file +})(jQuery); +/** + * ztree-touch-dragdrop.js + * --------------------------------------------------------------- + * Ajoute le support tactile (mobile / tablette) au drag & drop + * de zTree v3 (jquery.ztree.exedit.js). + * + * zTree écoute les événements mousedown / mousemove / mouseup + * via jQuery. Ce script intercepte les événements touch + * correspondants et les convertit en événements souris simulés + * que zTree peut traiter normalement. + * + * USAGE : + * Inclure ce fichier APRÈS jQuery, zTree core et zTree exedit : + * + * + * + * + * + * + * OPTIONS (optionnelles, à définir AVANT le chargement du script + * ou via zTreeTouchDragDrop.configure()) : + * + * zTreeTouchDragDrop.configure({ + * longPressDelayMs : 300, // délai avant d'activer le drag (ms) + * moveThresholdPx : 8, // déplacement minimum pour démarrer le drag (px) + * scrollMarginPx : 40, // zone de bord pour le scroll automatique (px) + * scrollSpeedPx : 6, // vitesse du scroll automatique (px par frame) + * debug : false // activer les logs console + * }); + * + * LICENCE : MIT + * --------------------------------------------------------------- + */ +(function (window, document, $) { + "use strict"; + + /* ========================================================= + * Vérifications préalables + * ========================================================= */ + if (typeof $ === "undefined") { + console.warn("[zTree-touch] jQuery introuvable. Le patch tactile ne sera pas activé."); + return; + } + + /* ========================================================= + * Configuration par défaut + * ========================================================= */ + var config = { + /** Délai de pression longue avant d'autoriser le drag (ms). + * Empêche les drags accidentels lors du scroll. */ + longPressDelayMs: 300, + + /** Seuil de déplacement (px) en dessous duquel on considère + * que l'utilisateur n'a pas bougé (tolère le tremblement du doigt). */ + moveThresholdPx: 8, + + /** Taille de la zone de bord (px) qui déclenche le scroll automatique + * quand on traîne un nœud vers le haut ou le bas du conteneur. */ + scrollMarginPx: 40, + + /** Vitesse du scroll automatique (px par frame d'animation). */ + scrollSpeedPx: 6, + + /** Active les messages de debug en console. */ + debug: false + }; + + /* ========================================================= + * État interne du drag tactile + * ========================================================= */ + var touchState = { + /** Identifiant du touch en cours (Touch.identifier). */ + activeTouchId: null, + + /** Élément DOM touché initialement. */ + startTarget: null, + + /** Coordonnées de départ du touch (clientX / clientY). */ + startX: 0, + startY: 0, + + /** Timer de pression longue (setTimeout id). */ + longPressTimer: null, + + /** Indique si la pression longue a été validée. */ + longPressActivated: false, + + /** Indique si un drag est effectivement en cours + * (le seuil de déplacement a été dépassé). */ + isDragging: false, + + /** requestAnimationFrame id pour le scroll automatique. */ + autoScrollRAF: null, + + /** Direction du scroll automatique (-1, 0, +1). */ + autoScrollDirection: 0 + }; + + /* ========================================================= + * Utilitaires + * ========================================================= */ + + /** + * Écrit dans la console si le mode debug est actif. + * @param {...*} args - Arguments à logguer. + */ + function debugLog() { + if (config.debug) { + var args = Array.prototype.slice.call(arguments); + args.unshift("[zTree-touch]"); + console.log.apply(console, args); + } + } + + /** + * Vérifie si un élément DOM appartient à un arbre zTree + * (présence d'un ancêtre avec la classe "ztree"). + * @param {HTMLElement} element + * @returns {boolean} + */ + function isInsideZTree(element) { + var node = element; + while (node && node !== document.body) { + if (node.classList && node.classList.contains("ztree")) { + return true; + } + node = node.parentNode; + } + return false; + } + + /** + * Recherche le conteneur scrollable le plus proche + * au-dessus de l'élément donné (utile pour le scroll automatique). + * @param {HTMLElement} element + * @returns {HTMLElement|null} + */ + function findScrollableAncestor(element) { + var node = element; + while (node && node !== document.body) { + var overflowY = window.getComputedStyle(node).overflowY; + if ((overflowY === "auto" || overflowY === "scroll") && node.scrollHeight > node.clientHeight) { + return node; + } + node = node.parentNode; + } + return null; + } + + /** + * Crée et dispatche un événement souris simulé sur un élément cible. + * L'événement est créé de manière compatible avec les anciens navigateurs. + * + * @param {string} mouseEventType - "mousedown", "mousemove" ou "mouseup" + * @param {Touch} touch - Objet Touch source + * @param {HTMLElement} target - Élément cible de l'événement + */ + function dispatchSimulatedMouseEvent(mouseEventType, touch, target) { + var simulatedEvent; + + /* Tentative avec le constructeur MouseEvent (navigateurs modernes) */ + try { + simulatedEvent = new MouseEvent(mouseEventType, { + bubbles: true, + cancelable: true, + view: window, + detail: 1, + screenX: touch.screenX, + screenY: touch.screenY, + clientX: touch.clientX, + clientY: touch.clientY, + button: 0, + buttons: (mouseEventType === "mouseup") ? 0 : 1 + }); + } catch (e) { + /* Fallback : document.createEvent (anciens navigateurs) */ + simulatedEvent = document.createEvent("MouseEvents"); + simulatedEvent.initMouseEvent( + mouseEventType, true, true, window, 1, + touch.screenX, touch.screenY, + touch.clientX, touch.clientY, + false, false, false, false, + 0, null + ); + } + + /* Marqueur pour éviter de re-traiter nos propres événements */ + simulatedEvent._ztreeTouchSimulated = true; + + target.dispatchEvent(simulatedEvent); + debugLog("Dispatché :", mouseEventType, "sur", target.tagName, target.className); + } + + /* ========================================================= + * Gestion du scroll automatique + * ========================================================= */ + + /** + * Démarre ou met à jour le scroll automatique. + * @param {HTMLElement} scrollContainer + */ + function startAutoScroll(scrollContainer) { + if (touchState.autoScrollRAF) { + return; /* déjà en cours */ + } + + function scrollStep() { + if (touchState.autoScrollDirection === 0 || !touchState.isDragging) { + touchState.autoScrollRAF = null; + return; + } + scrollContainer.scrollTop += touchState.autoScrollDirection * config.scrollSpeedPx; + touchState.autoScrollRAF = requestAnimationFrame(scrollStep); + } + + touchState.autoScrollRAF = requestAnimationFrame(scrollStep); + } + + /** + * Arrête le scroll automatique. + */ + function stopAutoScroll() { + touchState.autoScrollDirection = 0; + if (touchState.autoScrollRAF) { + cancelAnimationFrame(touchState.autoScrollRAF); + touchState.autoScrollRAF = null; + } + } + + /** + * Met à jour la direction de scroll automatique en fonction + * de la position du doigt par rapport au conteneur. + * @param {Touch} touch + * @param {HTMLElement} scrollContainer + */ + function updateAutoScroll(touch, scrollContainer) { + if (!scrollContainer) { + return; + } + + var containerRect = scrollContainer.getBoundingClientRect(); + var touchY = touch.clientY; + + if (touchY < containerRect.top + config.scrollMarginPx) { + /* Doigt proche du haut → scroller vers le haut */ + touchState.autoScrollDirection = -1; + startAutoScroll(scrollContainer); + } else if (touchY > containerRect.bottom - config.scrollMarginPx) { + /* Doigt proche du bas → scroller vers le bas */ + touchState.autoScrollDirection = 1; + startAutoScroll(scrollContainer); + } else { + stopAutoScroll(); + } + } + + /* ========================================================= + * Réinitialisation de l'état + * ========================================================= */ + + /** + * Remet l'état interne à zéro. + */ + function resetTouchState() { + clearTimeout(touchState.longPressTimer); + stopAutoScroll(); + + touchState.activeTouchId = null; + touchState.startTarget = null; + touchState.startX = 0; + touchState.startY = 0; + touchState.longPressTimer = null; + touchState.longPressActivated = false; + touchState.isDragging = false; + } + + /* ========================================================= + * Gestionnaires d'événements touch + * ========================================================= */ + + /** + * Gestionnaire de touchstart. + * Enregistre le point de contact et lance le timer de pression longue. + * @param {TouchEvent} touchEvent + */ + function handleTouchStart(touchEvent) { + /* On ne gère qu'un seul doigt à la fois */ + if (touchState.activeTouchId !== null) { + return; + } + + var firstTouch = touchEvent.changedTouches[0]; + var targetElement = firstTouch.target; + + /* Vérifier que le touch se produit dans un arbre zTree */ + if (!isInsideZTree(targetElement)) { + return; + } + + debugLog("touchstart détecté sur", targetElement.tagName, targetElement.className); + + touchState.activeTouchId = firstTouch.identifier; + touchState.startTarget = targetElement; + touchState.startX = firstTouch.clientX; + touchState.startY = firstTouch.clientY; + touchState.longPressActivated = false; + touchState.isDragging = false; + + /* Lancer le timer de pression longue */ + touchState.longPressTimer = setTimeout(function () { + touchState.longPressActivated = true; + debugLog("Pression longue activée"); + + /* Envoyer un mousedown simulé pour que zTree démarre le drag */ + dispatchSimulatedMouseEvent("mousedown", firstTouch, targetElement); + }, config.longPressDelayMs); + } + + /** + * Gestionnaire de touchmove. + * Si la pression longue est activée, simule un mousemove. + * @param {TouchEvent} touchEvent + */ + function handleTouchMove(touchEvent) { + /* Trouver le touch actif dans la liste */ + var activeTouch = null; + for (var i = 0; i < touchEvent.changedTouches.length; i++) { + if (touchEvent.changedTouches[i].identifier === touchState.activeTouchId) { + activeTouch = touchEvent.changedTouches[i]; + break; + } + } + + if (!activeTouch) { + return; + } + + var deltaX = Math.abs(activeTouch.clientX - touchState.startX); + var deltaY = Math.abs(activeTouch.clientY - touchState.startY); + var distanceMoved = Math.sqrt(deltaX * deltaX + deltaY * deltaY); + + /* Si le doigt bouge avant que la pression longue soit validée, + * annuler le timer (l'utilisateur veut probablement scroller). */ + if (!touchState.longPressActivated) { + if (distanceMoved > config.moveThresholdPx) { + clearTimeout(touchState.longPressTimer); + resetTouchState(); + debugLog("Touch annulé (scroll détecté avant pression longue)"); + } + return; + } + + /* La pression longue est active → on est en mode drag */ + touchEvent.preventDefault(); /* Empêcher le scroll natif */ + + if (!touchState.isDragging && distanceMoved > config.moveThresholdPx) { + touchState.isDragging = true; + debugLog("Drag démarré"); + } + + /* Trouver l'élément sous le doigt (nécessaire car le touch + * rapporte toujours la cible initiale, pas celle sous le doigt). */ + var elementUnderFinger = document.elementFromPoint( + activeTouch.clientX, + activeTouch.clientY + ); + + if (elementUnderFinger) { + dispatchSimulatedMouseEvent("mousemove", activeTouch, elementUnderFinger); + } + + /* Gérer le scroll automatique quand le doigt approche des bords */ + var scrollContainer = findScrollableAncestor(touchState.startTarget); + updateAutoScroll(activeTouch, scrollContainer); + } + + /** + * Gestionnaire de touchend / touchcancel. + * Simule un mouseup pour finaliser le drag. + * @param {TouchEvent} touchEvent + */ + function handleTouchEnd(touchEvent) { + var activeTouch = null; + for (var i = 0; i < touchEvent.changedTouches.length; i++) { + if (touchEvent.changedTouches[i].identifier === touchState.activeTouchId) { + activeTouch = touchEvent.changedTouches[i]; + break; + } + } + + if (!activeTouch) { + return; + } + + debugLog("touchend détecté, longPressActivated:", touchState.longPressActivated, "isDragging:", touchState.isDragging); + + if (touchState.longPressActivated) { + touchEvent.preventDefault(); + + var elementUnderFinger = document.elementFromPoint( + activeTouch.clientX, + activeTouch.clientY + ); + + if (elementUnderFinger) { + dispatchSimulatedMouseEvent("mouseup", activeTouch, elementUnderFinger); + } + } + + resetTouchState(); + } + + /* ========================================================= + * API publique + * ========================================================= */ + + var zTreeTouchDragDrop = { + /** Version du patch. */ + version: "1.0.0", + + /** + * Permet de modifier la configuration. + * @param {Object} userConfig - Objet avec les clés à surcharger. + */ + configure: function (userConfig) { + if (typeof userConfig !== "object" || userConfig === null) { + return; + } + for (var key in userConfig) { + if (userConfig.hasOwnProperty(key) && config.hasOwnProperty(key)) { + config[key] = userConfig[key]; + } + } + debugLog("Configuration mise à jour :", JSON.stringify(config)); + }, + + /** + * Active les écouteurs tactiles (appelé automatiquement au chargement). + * Peut être rappelé manuellement si le DOM a été reconstruit. + */ + enable: function () { + document.addEventListener("touchstart", handleTouchStart, { passive: true }); + document.addEventListener("touchmove", handleTouchMove, { passive: false }); + document.addEventListener("touchend", handleTouchEnd, { passive: false }); + document.addEventListener("touchcancel", handleTouchEnd, { passive: false }); + debugLog("Écouteurs tactiles activés."); + }, + + /** + * Désactive les écouteurs tactiles. + */ + disable: function () { + document.removeEventListener("touchstart", handleTouchStart); + document.removeEventListener("touchmove", handleTouchMove); + document.removeEventListener("touchend", handleTouchEnd); + document.removeEventListener("touchcancel", handleTouchEnd); + resetTouchState(); + debugLog("Écouteurs tactiles désactivés."); + } + }; + + /* ========================================================= + * Activation automatique + * ========================================================= */ + + /* Vérifier que l'appareil supporte le touch avant d'activer */ + if ("ontouchstart" in window || navigator.maxTouchPoints > 0) { + zTreeTouchDragDrop.enable(); + debugLog("Support tactile détecté, patch activé."); + } else { + debugLog("Pas de support tactile détecté, patch en attente."); + } + + /* Exposer l'API publique */ + window.zTreeTouchDragDrop = zTreeTouchDragDrop; + +})(window, document, typeof jQuery !== "undefined" ? jQuery : undefined); \ No newline at end of file diff --git a/js/jquery.ztree.exedit.js_orig b/js/jquery.ztree.exedit.js_orig new file mode 100644 index 0000000..cfa83ba --- /dev/null +++ b/js/jquery.ztree.exedit.js_orig @@ -0,0 +1,1207 @@ +/* + * JQuery zTree exedit + * v3.5.48 + * http://treejs.cn/ + * + * Copyright (c) 2010 Hunter.z + * + * Licensed same as jquery - MIT License + * http://www.opensource.org/licenses/mit-license.php + * + * Date: 2020-11-21 + */ + +(function ($) { + //default consts of exedit + var _consts = { + event: { + DRAG: "ztree_drag", + DROP: "ztree_drop", + RENAME: "ztree_rename", + DRAGMOVE: "ztree_dragmove" + }, + id: { + EDIT: "_edit", + INPUT: "_input", + REMOVE: "_remove" + }, + move: { + TYPE_INNER: "inner", + TYPE_PREV: "prev", + TYPE_NEXT: "next" + }, + node: { + CURSELECTED_EDIT: "curSelectedNode_Edit", + TMPTARGET_TREE: "tmpTargetzTree", + TMPTARGET_NODE: "tmpTargetNode" + } + }, + //default setting of exedit + _setting = { + edit: { + enable: false, + editNameSelectAll: false, + showRemoveBtn: true, + showRenameBtn: true, + removeTitle: "remove", + renameTitle: "rename", + drag: { + autoExpandTrigger: false, + isCopy: true, + isMove: true, + prev: true, + next: true, + inner: true, + minMoveSize: 5, + borderMax: 10, + borderMin: -5, + maxShowNodeNum: 5, + autoOpenTime: 500 + } + }, + view: { + addHoverDom: null, + removeHoverDom: null + }, + callback: { + beforeDrag: null, + beforeDragOpen: null, + beforeDrop: null, + beforeEditName: null, + beforeRename: null, + onDrag: null, + onDragMove: null, + onDrop: null, + onRename: null + } + }, + //default root of exedit + _initRoot = function (setting) { + var r = data.getRoot(setting), rs = data.getRoots(); + r.curEditNode = null; + r.curEditInput = null; + r.curHoverNode = null; + r.dragFlag = 0; + r.dragNodeShowBefore = []; + r.dragMaskList = new Array(); + rs.showHoverDom = true; + }, + //default cache of exedit + _initCache = function (treeId) { + }, + //default bind event of exedit + _bindEvent = function (setting) { + var o = setting.treeObj; + var c = consts.event; + o.bind(c.RENAME, function (event, treeId, treeNode, isCancel) { + tools.apply(setting.callback.onRename, [event, treeId, treeNode, isCancel]); + }); + + o.bind(c.DRAG, function (event, srcEvent, treeId, treeNodes) { + tools.apply(setting.callback.onDrag, [srcEvent, treeId, treeNodes]); + }); + + o.bind(c.DRAGMOVE, function (event, srcEvent, treeId, treeNodes) { + tools.apply(setting.callback.onDragMove, [srcEvent, treeId, treeNodes]); + }); + + o.bind(c.DROP, function (event, srcEvent, treeId, treeNodes, targetNode, moveType, isCopy) { + tools.apply(setting.callback.onDrop, [srcEvent, treeId, treeNodes, targetNode, moveType, isCopy]); + }); + }, + _unbindEvent = function (setting) { + var o = setting.treeObj; + var c = consts.event; + o.unbind(c.RENAME); + o.unbind(c.DRAG); + o.unbind(c.DRAGMOVE); + o.unbind(c.DROP); + }, + //default event proxy of exedit + _eventProxy = function (e) { + var target = e.target, + setting = data.getSetting(e.data.treeId), + relatedTarget = e.relatedTarget, + tId = "", node = null, + nodeEventType = "", treeEventType = "", + nodeEventCallback = null, treeEventCallback = null, + tmp = null; + + if (tools.eqs(e.type, "mouseover")) { + tmp = tools.getMDom(setting, target, [{tagName: "a", attrName: "treeNode" + consts.id.A}]); + if (tmp) { + tId = tools.getNodeMainDom(tmp).id; + nodeEventType = "hoverOverNode"; + } + } else if (tools.eqs(e.type, "mouseout")) { + tmp = tools.getMDom(setting, relatedTarget, [{tagName: "a", attrName: "treeNode" + consts.id.A}]); + if (!tmp) { + tId = "remove"; + nodeEventType = "hoverOutNode"; + } + } else if (tools.eqs(e.type, "mousedown")) { + tmp = tools.getMDom(setting, target, [{tagName: "a", attrName: "treeNode" + consts.id.A}]); + if (tmp) { + tId = tools.getNodeMainDom(tmp).id; + nodeEventType = "mousedownNode"; + } + } + if (tId.length > 0) { + node = data.getNodeCache(setting, tId); + switch (nodeEventType) { + case "mousedownNode" : + nodeEventCallback = _handler.onMousedownNode; + break; + case "hoverOverNode" : + nodeEventCallback = _handler.onHoverOverNode; + break; + case "hoverOutNode" : + nodeEventCallback = _handler.onHoverOutNode; + break; + } + } + var proxyResult = { + stop: false, + node: node, + nodeEventType: nodeEventType, + nodeEventCallback: nodeEventCallback, + treeEventType: treeEventType, + treeEventCallback: treeEventCallback + }; + return proxyResult + }, + //default init node of exedit + _initNode = function (setting, level, n, parentNode, isFirstNode, isLastNode, openFlag) { + if (!n) return; + n.isHover = false; + n.editNameFlag = false; + }, + //update zTreeObj, add method of edit + _zTreeTools = function (setting, zTreeTools) { + zTreeTools.cancelEditName = function (newName) { + var root = data.getRoot(this.setting); + if (!root.curEditNode) return; + view.cancelCurEditNode(this.setting, newName ? newName : null, true); + } + zTreeTools.copyNode = function (targetNode, node, moveType, isSilent) { + if (!node) return null; + var isParent = data.nodeIsParent(setting, targetNode); + if (targetNode && !isParent && this.setting.data.keep.leaf && moveType === consts.move.TYPE_INNER) return null; + var _this = this, + newNode = tools.clone(node); + if (!targetNode) { + targetNode = null; + moveType = consts.move.TYPE_INNER; + } + if (moveType == consts.move.TYPE_INNER) { + function copyCallback() { + view.addNodes(_this.setting, targetNode, -1, [newNode], isSilent); + } + + if (tools.canAsync(this.setting, targetNode)) { + view.asyncNode(this.setting, targetNode, isSilent, copyCallback); + } else { + copyCallback(); + } + } else { + view.addNodes(this.setting, targetNode.parentNode, -1, [newNode], isSilent); + view.moveNode(this.setting, targetNode, newNode, moveType, false, isSilent); + } + return newNode; + } + zTreeTools.editName = function (node) { + if (!node || !node.tId || node !== data.getNodeCache(this.setting, node.tId)) return; + if (node.parentTId) view.expandCollapseParentNode(this.setting, node.getParentNode(), true); + view.editNode(this.setting, node) + } + zTreeTools.moveNode = function (targetNode, node, moveType, isSilent) { + if (!node) return node; + var isParent = data.nodeIsParent(setting, targetNode); + if (targetNode && !isParent && this.setting.data.keep.leaf && moveType === consts.move.TYPE_INNER) { + return null; + } else if (targetNode && ((node.parentTId == targetNode.tId && moveType == consts.move.TYPE_INNER) || $$(node, this.setting).find("#" + targetNode.tId).length > 0)) { + return null; + } else if (!targetNode) { + targetNode = null; + } + var _this = this; + + function moveCallback() { + view.moveNode(_this.setting, targetNode, node, moveType, false, isSilent); + } + + if (tools.canAsync(this.setting, targetNode) && moveType === consts.move.TYPE_INNER) { + view.asyncNode(this.setting, targetNode, isSilent, moveCallback); + } else { + moveCallback(); + } + return node; + } + zTreeTools.setEditable = function (editable) { + this.setting.edit.enable = editable; + return this.refresh(); + } + }, + //method of operate data + _data = { + setSonNodeLevel: function (setting, parentNode, node) { + if (!node) return; + var children = data.nodeChildren(setting, node); + var oldLevel = node.level; + node.level = (parentNode) ? parentNode.level + 1 : 0; + view.repairNodeLevelClass(setting, node, oldLevel); + + if (!children) return; + for (var i = 0, l = children.length; i < l; i++) { + if (children[i]) data.setSonNodeLevel(setting, node, children[i]); + } + } + }, + //method of event proxy + _event = {}, + //method of event handler + _handler = { + onHoverOverNode: function (event, node) { + var setting = data.getSetting(event.data.treeId), + root = data.getRoot(setting); + if (root.curHoverNode != node) { + _handler.onHoverOutNode(event); + } + root.curHoverNode = node; + view.addHoverDom(setting, node); + }, + onHoverOutNode: function (event, node) { + var setting = data.getSetting(event.data.treeId), + root = data.getRoot(setting); + if (root.curHoverNode && !data.isSelectedNode(setting, root.curHoverNode)) { + view.removeTreeDom(setting, root.curHoverNode); + root.curHoverNode = null; + } + }, + onMousedownNode: function (eventMouseDown, _node) { + var i, l, + setting = data.getSetting(eventMouseDown.data.treeId), + root = data.getRoot(setting), roots = data.getRoots(); + //right click can't drag & drop + if (eventMouseDown.button == 2 || !setting.edit.enable || (!setting.edit.drag.isCopy && !setting.edit.drag.isMove)) return true; + + //input of edit node name can't drag & drop + var target = eventMouseDown.target, + _nodes = data.getRoot(setting).curSelectedList, + nodes = []; + if (!data.isSelectedNode(setting, _node)) { + nodes = [_node]; + } else { + for (i = 0, l = _nodes.length; i < l; i++) { + if (_nodes[i].editNameFlag && tools.eqs(target.tagName, "input") && target.getAttribute("treeNode" + consts.id.INPUT) !== null) { + return true; + } + nodes.push(_nodes[i]); + if (nodes[0].parentTId !== _nodes[i].parentTId) { + nodes = [_node]; + break; + } + } + } + + view.editNodeBlur = true; + view.cancelCurEditNode(setting); + + var doc = $(setting.treeObj.get(0).ownerDocument), + body = $(setting.treeObj.get(0).ownerDocument.body), curNode, tmpArrow, tmpTarget, + isOtherTree = false, + targetSetting = setting, + sourceSetting = setting, + preNode, nextNode, + preTmpTargetNodeId = null, + preTmpMoveType = null, + tmpTargetNodeId = null, + moveType = consts.move.TYPE_INNER, + mouseDownX = eventMouseDown.clientX, + mouseDownY = eventMouseDown.clientY, + startTime = (new Date()).getTime(); + + if (tools.uCanDo(setting)) { + doc.bind("mousemove", _docMouseMove); + } + + function _docMouseMove(event) { + //avoid start drag after click node + if (root.dragFlag == 0 && Math.abs(mouseDownX - event.clientX) < setting.edit.drag.minMoveSize + && Math.abs(mouseDownY - event.clientY) < setting.edit.drag.minMoveSize) { + return true; + } + var i, l, tmpNode, tmpDom, tmpNodes; + body.css("cursor", "pointer"); + + if (root.dragFlag == 0) { + if (tools.apply(setting.callback.beforeDrag, [setting.treeId, nodes], true) == false) { + _docMouseUp(event); + return true; + } + + for (i = 0, l = nodes.length; i < l; i++) { + if (i == 0) { + root.dragNodeShowBefore = []; + } + tmpNode = nodes[i]; + if (data.nodeIsParent(setting, tmpNode) && tmpNode.open) { + view.expandCollapseNode(setting, tmpNode, !tmpNode.open); + root.dragNodeShowBefore[tmpNode.tId] = true; + } else { + root.dragNodeShowBefore[tmpNode.tId] = false; + } + } + + root.dragFlag = 1; + roots.showHoverDom = false; + tools.showIfameMask(setting, true); + + //sort + var isOrder = true, lastIndex = -1; + if (nodes.length > 1) { + var pNodes = nodes[0].parentTId ? data.nodeChildren(setting, nodes[0].getParentNode()) : data.getNodes(setting); + tmpNodes = []; + for (i = 0, l = pNodes.length; i < l; i++) { + if (root.dragNodeShowBefore[pNodes[i].tId] !== undefined) { + if (isOrder && lastIndex > -1 && (lastIndex + 1) !== i) { + isOrder = false; + } + tmpNodes.push(pNodes[i]); + lastIndex = i; + } + if (nodes.length === tmpNodes.length) { + nodes = tmpNodes; + break; + } + } + } + if (isOrder) { + preNode = nodes[0].getPreNode(); + nextNode = nodes[nodes.length - 1].getNextNode(); + } + + //set node in selected + curNode = $$("", setting); + for (i = 0, l = nodes.length; i < l; i++) { + tmpNode = nodes[i]; + tmpNode.editNameFlag = false; + view.selectNode(setting, tmpNode, i > 0); + view.removeTreeDom(setting, tmpNode); + + if (i > setting.edit.drag.maxShowNodeNum - 1) { + continue; + } + + tmpDom = $$("
  • ", setting); + tmpDom.append($$(tmpNode, consts.id.A, setting).clone()); + tmpDom.css("padding", "0"); + tmpDom.children("#" + tmpNode.tId + consts.id.A).removeClass(consts.node.CURSELECTED); + curNode.append(tmpDom); + if (i == setting.edit.drag.maxShowNodeNum - 1) { + tmpDom = $$("
  • ...
    • ", setting); + curNode.append(tmpDom); + } + } + curNode.attr("id", nodes[0].tId + consts.id.UL + "_tmp"); + curNode.addClass(setting.treeObj.attr("class")); + curNode.appendTo(body); + + tmpArrow = $$("", setting); + tmpArrow.attr("id", "zTreeMove_arrow_tmp"); + tmpArrow.appendTo(body); + + setting.treeObj.trigger(consts.event.DRAG, [event, setting.treeId, nodes]); + } + + if (root.dragFlag == 1) { + if (tmpTarget && tmpArrow.attr("id") == event.target.id && tmpTargetNodeId && (event.clientX + doc.scrollLeft() + 2) > ($("#" + tmpTargetNodeId + consts.id.A, tmpTarget).offset().left)) { + var xT = $("#" + tmpTargetNodeId + consts.id.A, tmpTarget); + event.target = (xT.length > 0) ? xT.get(0) : event.target; + } else if (tmpTarget) { + tmpTarget.removeClass(consts.node.TMPTARGET_TREE); + if (tmpTargetNodeId) $("#" + tmpTargetNodeId + consts.id.A, tmpTarget).removeClass(consts.node.TMPTARGET_NODE + "_" + consts.move.TYPE_PREV) + .removeClass(consts.node.TMPTARGET_NODE + "_" + _consts.move.TYPE_NEXT).removeClass(consts.node.TMPTARGET_NODE + "_" + _consts.move.TYPE_INNER); + } + tmpTarget = null; + tmpTargetNodeId = null; + + //judge drag & drop in multi ztree + isOtherTree = false; + targetSetting = setting; + var settings = data.getSettings(); + for (var s in settings) { + if (settings[s].treeId && settings[s].edit.enable && settings[s].treeId != setting.treeId + && (event.target.id == settings[s].treeId || $(event.target).parents("#" + settings[s].treeId).length > 0)) { + isOtherTree = true; + targetSetting = settings[s]; + } + } + + var docScrollTop = doc.scrollTop(), + docScrollLeft = doc.scrollLeft(), + treeOffset = targetSetting.treeObj.offset(), + scrollHeight = targetSetting.treeObj.get(0).scrollHeight, + scrollWidth = targetSetting.treeObj.get(0).scrollWidth, + dTop = (event.clientY + docScrollTop - treeOffset.top), + dBottom = (targetSetting.treeObj.height() + treeOffset.top - event.clientY - docScrollTop), + dLeft = (event.clientX + docScrollLeft - treeOffset.left), + dRight = (targetSetting.treeObj.width() + treeOffset.left - event.clientX - docScrollLeft), + isTop = (dTop < setting.edit.drag.borderMax && dTop > setting.edit.drag.borderMin), + isBottom = (dBottom < setting.edit.drag.borderMax && dBottom > setting.edit.drag.borderMin), + isLeft = (dLeft < setting.edit.drag.borderMax && dLeft > setting.edit.drag.borderMin), + isRight = (dRight < setting.edit.drag.borderMax && dRight > setting.edit.drag.borderMin), + isTreeInner = dTop > setting.edit.drag.borderMin && dBottom > setting.edit.drag.borderMin && dLeft > setting.edit.drag.borderMin && dRight > setting.edit.drag.borderMin, + isTreeTop = (isTop && targetSetting.treeObj.scrollTop() <= 0), + isTreeBottom = (isBottom && (targetSetting.treeObj.scrollTop() + targetSetting.treeObj.height() + 10) >= scrollHeight), + isTreeLeft = (isLeft && targetSetting.treeObj.scrollLeft() <= 0), + isTreeRight = (isRight && (targetSetting.treeObj.scrollLeft() + targetSetting.treeObj.width() + 10) >= scrollWidth); + + if (event.target && tools.isChildOrSelf(event.target, targetSetting.treeId)) { + //get node
  • dom + var targetObj = event.target; + while (targetObj && targetObj.tagName && !tools.eqs(targetObj.tagName, "li") && targetObj.id != targetSetting.treeId) { + targetObj = targetObj.parentNode; + } + + var canMove = true; + //don't move to self or children of self + for (i = 0, l = nodes.length; i < l; i++) { + tmpNode = nodes[i]; + if (targetObj.id === tmpNode.tId) { + canMove = false; + break; + } else if ($$(tmpNode, setting).find("#" + targetObj.id).length > 0) { + canMove = false; + break; + } + } + if (canMove && event.target && tools.isChildOrSelf(event.target, targetObj.id + consts.id.A)) { + tmpTarget = $(targetObj); + tmpTargetNodeId = targetObj.id; + } + } + + //the mouse must be in zTree + tmpNode = nodes[0]; + if (isTreeInner && tools.isChildOrSelf(event.target, targetSetting.treeId)) { + //judge mouse move in root of ztree + if (!tmpTarget && (event.target.id == targetSetting.treeId || isTreeTop || isTreeBottom || isTreeLeft || isTreeRight) && (isOtherTree || (!isOtherTree && tmpNode.parentTId))) { + tmpTarget = targetSetting.treeObj; + } + //auto scroll top + if (isTop) { + targetSetting.treeObj.scrollTop(targetSetting.treeObj.scrollTop() - 10); + } else if (isBottom) { + targetSetting.treeObj.scrollTop(targetSetting.treeObj.scrollTop() + 10); + } + if (isLeft) { + targetSetting.treeObj.scrollLeft(targetSetting.treeObj.scrollLeft() - 10); + } else if (isRight) { + targetSetting.treeObj.scrollLeft(targetSetting.treeObj.scrollLeft() + 10); + } + //auto scroll left + if (tmpTarget && tmpTarget != targetSetting.treeObj && tmpTarget.offset().left < targetSetting.treeObj.offset().left) { + targetSetting.treeObj.scrollLeft(targetSetting.treeObj.scrollLeft() + tmpTarget.offset().left - targetSetting.treeObj.offset().left); + } + } + + curNode.css({ + "top": (event.clientY + docScrollTop + 3) + "px", + "left": (event.clientX + docScrollLeft + 3) + "px" + }); + + var dX = 0; + var dY = 0; + if (tmpTarget && tmpTarget.attr("id") != targetSetting.treeId) { + var tmpTargetNode = tmpTargetNodeId == null ? null : data.getNodeCache(targetSetting, tmpTargetNodeId), + isCopy = ((event.ctrlKey || event.metaKey) && setting.edit.drag.isMove && setting.edit.drag.isCopy) || (!setting.edit.drag.isMove && setting.edit.drag.isCopy), + isPrev = !!(preNode && tmpTargetNodeId === preNode.tId), + isNext = !!(nextNode && tmpTargetNodeId === nextNode.tId), + isInner = (tmpNode.parentTId && tmpNode.parentTId == tmpTargetNodeId), + canPrev = (isCopy || !isNext) && tools.apply(targetSetting.edit.drag.prev, [targetSetting.treeId, nodes, tmpTargetNode], !!targetSetting.edit.drag.prev), + canNext = (isCopy || !isPrev) && tools.apply(targetSetting.edit.drag.next, [targetSetting.treeId, nodes, tmpTargetNode], !!targetSetting.edit.drag.next), + canInner = (isCopy || !isInner) && !(targetSetting.data.keep.leaf && !data.nodeIsParent(setting, tmpTargetNode)) && tools.apply(targetSetting.edit.drag.inner, [targetSetting.treeId, nodes, tmpTargetNode], !!targetSetting.edit.drag.inner); + + function clearMove() { + tmpTarget = null; + tmpTargetNodeId = ""; + moveType = consts.move.TYPE_INNER; + tmpArrow.css({ + "display": "none" + }); + if (window.zTreeMoveTimer) { + clearTimeout(window.zTreeMoveTimer); + window.zTreeMoveTargetNodeTId = null + } + } + + if (!canPrev && !canNext && !canInner) { + clearMove(); + } else { + var tmpTargetA = $("#" + tmpTargetNodeId + consts.id.A, tmpTarget), + tmpNextA = tmpTargetNode.isLastNode ? null : $("#" + tmpTargetNode.getNextNode().tId + consts.id.A, tmpTarget.next()), + tmpTop = tmpTargetA.offset().top, + tmpLeft = tmpTargetA.offset().left, + prevPercent = canPrev ? (canInner ? 0.25 : (canNext ? 0.5 : 1)) : -1, + nextPercent = canNext ? (canInner ? 0.75 : (canPrev ? 0.5 : 0)) : -1, + dY_percent = (event.clientY + docScrollTop - tmpTop) / tmpTargetA.height(); + + if ((prevPercent == 1 || dY_percent <= prevPercent && dY_percent >= -.2) && canPrev) { + dX = 1 - tmpArrow.width(); + dY = tmpTop - tmpArrow.height() / 2; + moveType = consts.move.TYPE_PREV; + } else if ((nextPercent == 0 || dY_percent >= nextPercent && dY_percent <= 1.2) && canNext) { + dX = 1 - tmpArrow.width(); + dY = (tmpNextA == null || (data.nodeIsParent(setting, tmpTargetNode) && tmpTargetNode.open)) ? (tmpTop + tmpTargetA.height() - tmpArrow.height() / 2) : (tmpNextA.offset().top - tmpArrow.height() / 2); + moveType = consts.move.TYPE_NEXT; + } else if (canInner) { + dX = 5 - tmpArrow.width(); + dY = tmpTop; + moveType = consts.move.TYPE_INNER; + } else { + clearMove(); + } + + if (tmpTarget) { + tmpArrow.css({ + "display": "block", + "top": dY + "px", + "left": (tmpLeft + dX) + "px" + }); + tmpTargetA.addClass(consts.node.TMPTARGET_NODE + "_" + moveType); + + if (preTmpTargetNodeId != tmpTargetNodeId || preTmpMoveType != moveType) { + startTime = (new Date()).getTime(); + } + if (tmpTargetNode && data.nodeIsParent(setting, tmpTargetNode) && moveType == consts.move.TYPE_INNER) { + var startTimer = true; + if (window.zTreeMoveTimer && window.zTreeMoveTargetNodeTId !== tmpTargetNode.tId) { + clearTimeout(window.zTreeMoveTimer); + window.zTreeMoveTargetNodeTId = null; + } else if (window.zTreeMoveTimer && window.zTreeMoveTargetNodeTId === tmpTargetNode.tId) { + startTimer = false; + } + if (startTimer) { + window.zTreeMoveTimer = setTimeout(function () { + if (moveType != consts.move.TYPE_INNER) return; + if (tmpTargetNode && data.nodeIsParent(setting, tmpTargetNode) && !tmpTargetNode.open && (new Date()).getTime() - startTime > targetSetting.edit.drag.autoOpenTime + && tools.apply(targetSetting.callback.beforeDragOpen, [targetSetting.treeId, tmpTargetNode], true)) { + view.switchNode(targetSetting, tmpTargetNode); + if (targetSetting.edit.drag.autoExpandTrigger) { + targetSetting.treeObj.trigger(consts.event.EXPAND, [targetSetting.treeId, tmpTargetNode]); + } + } + }, targetSetting.edit.drag.autoOpenTime + 50); + window.zTreeMoveTargetNodeTId = tmpTargetNode.tId; + } + } + } + } + } else { + moveType = consts.move.TYPE_INNER; + if (tmpTarget && tools.apply(targetSetting.edit.drag.inner, [targetSetting.treeId, nodes, null], !!targetSetting.edit.drag.inner)) { + tmpTarget.addClass(consts.node.TMPTARGET_TREE); + } else { + tmpTarget = null; + } + tmpArrow.css({ + "display": "none" + }); + if (window.zTreeMoveTimer) { + clearTimeout(window.zTreeMoveTimer); + window.zTreeMoveTargetNodeTId = null; + } + } + preTmpTargetNodeId = tmpTargetNodeId; + preTmpMoveType = moveType; + + setting.treeObj.trigger(consts.event.DRAGMOVE, [event, setting.treeId, nodes]); + } + return false; + } + + doc.bind("mouseup", _docMouseUp); + + function _docMouseUp(event) { + if (window.zTreeMoveTimer) { + clearTimeout(window.zTreeMoveTimer); + window.zTreeMoveTargetNodeTId = null; + } + preTmpTargetNodeId = null; + preTmpMoveType = null; + doc.unbind("mousemove", _docMouseMove); + doc.unbind("mouseup", _docMouseUp); + doc.unbind("selectstart", _docSelect); + body.css("cursor", ""); + if (tmpTarget) { + tmpTarget.removeClass(consts.node.TMPTARGET_TREE); + if (tmpTargetNodeId) $("#" + tmpTargetNodeId + consts.id.A, tmpTarget).removeClass(consts.node.TMPTARGET_NODE + "_" + consts.move.TYPE_PREV) + .removeClass(consts.node.TMPTARGET_NODE + "_" + _consts.move.TYPE_NEXT).removeClass(consts.node.TMPTARGET_NODE + "_" + _consts.move.TYPE_INNER); + } + tools.showIfameMask(setting, false); + + roots.showHoverDom = true; + if (root.dragFlag == 0) return; + root.dragFlag = 0; + + var i, l, tmpNode; + for (i = 0, l = nodes.length; i < l; i++) { + tmpNode = nodes[i]; + if (data.nodeIsParent(setting, tmpNode) && root.dragNodeShowBefore[tmpNode.tId] && !tmpNode.open) { + view.expandCollapseNode(setting, tmpNode, !tmpNode.open); + delete root.dragNodeShowBefore[tmpNode.tId]; + } + } + + if (curNode) curNode.remove(); + if (tmpArrow) tmpArrow.remove(); + + var isCopy = ((event.ctrlKey || event.metaKey) && setting.edit.drag.isMove && setting.edit.drag.isCopy) || (!setting.edit.drag.isMove && setting.edit.drag.isCopy); + if (!isCopy && tmpTarget && tmpTargetNodeId && nodes[0].parentTId && tmpTargetNodeId == nodes[0].parentTId && moveType == consts.move.TYPE_INNER) { + tmpTarget = null; + } + if (tmpTarget) { + var dragTargetNode = tmpTargetNodeId == null ? null : data.getNodeCache(targetSetting, tmpTargetNodeId); + if (tools.apply(setting.callback.beforeDrop, [targetSetting.treeId, nodes, dragTargetNode, moveType, isCopy], true) == false) { + view.selectNodes(sourceSetting, nodes); + return; + } + var newNodes = isCopy ? tools.clone(nodes) : nodes; + + function dropCallback() { + if (isOtherTree) { + if (!isCopy) { + for (var i = 0, l = nodes.length; i < l; i++) { + view.removeNode(setting, nodes[i]); + } + } + if (moveType == consts.move.TYPE_INNER) { + view.addNodes(targetSetting, dragTargetNode, -1, newNodes); + } else { + view.addNodes(targetSetting, dragTargetNode.getParentNode(), moveType == consts.move.TYPE_PREV ? dragTargetNode.getIndex() : dragTargetNode.getIndex() + 1, newNodes); + } + } else { + if (isCopy && moveType == consts.move.TYPE_INNER) { + view.addNodes(targetSetting, dragTargetNode, -1, newNodes); + } else if (isCopy) { + view.addNodes(targetSetting, dragTargetNode.getParentNode(), moveType == consts.move.TYPE_PREV ? dragTargetNode.getIndex() : dragTargetNode.getIndex() + 1, newNodes); + } else { + if (moveType != consts.move.TYPE_NEXT) { + for (i = 0, l = newNodes.length; i < l; i++) { + view.moveNode(targetSetting, dragTargetNode, newNodes[i], moveType, false); + } + } else { + for (i = -1, l = newNodes.length - 1; i < l; l--) { + view.moveNode(targetSetting, dragTargetNode, newNodes[l], moveType, false); + } + } + } + } + view.selectNodes(targetSetting, newNodes); + + var a = $$(newNodes[0], setting).get(0); + view.scrollIntoView(setting, a); + + setting.treeObj.trigger(consts.event.DROP, [event, targetSetting.treeId, newNodes, dragTargetNode, moveType, isCopy]); + } + + if (moveType == consts.move.TYPE_INNER && tools.canAsync(targetSetting, dragTargetNode)) { + view.asyncNode(targetSetting, dragTargetNode, false, dropCallback); + } else { + dropCallback(); + } + + } else { + view.selectNodes(sourceSetting, nodes); + setting.treeObj.trigger(consts.event.DROP, [event, setting.treeId, nodes, null, null, null]); + } + } + + doc.bind("selectstart", _docSelect); + + function _docSelect() { + return false; + } + + // 2018-03-30 FireFox has fixed this issue. + //Avoid FireFox's Bug + //If zTree Div CSS set 'overflow', so drag node outside of zTree, and event.target is error. + // if(eventMouseDown.preventDefault) { + // eventMouseDown.preventDefault(); + // } + return true; + } + }, + //method of tools for zTree + _tools = { + getAbs: function (obj) { + var oRect = obj.getBoundingClientRect(), + scrollTop = document.body.scrollTop + document.documentElement.scrollTop, + scrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft; + return [oRect.left + scrollLeft, oRect.top + scrollTop]; + }, + inputFocus: function (inputObj) { + if (inputObj.get(0)) { + inputObj.focus(); + tools.setCursorPosition(inputObj.get(0), inputObj.val().length); + } + }, + inputSelect: function (inputObj) { + if (inputObj.get(0)) { + inputObj.focus(); + inputObj.select(); + } + }, + setCursorPosition: function (obj, pos) { + if (obj.setSelectionRange) { + obj.focus(); + obj.setSelectionRange(pos, pos); + } else if (obj.createTextRange) { + var range = obj.createTextRange(); + range.collapse(true); + range.moveEnd('character', pos); + range.moveStart('character', pos); + range.select(); + } + }, + showIfameMask: function (setting, showSign) { + var root = data.getRoot(setting); + //clear full mask + while (root.dragMaskList.length > 0) { + root.dragMaskList[0].remove(); + root.dragMaskList.shift(); + } + if (showSign) { + //show mask + var iframeList = $$("iframe", setting); + for (var i = 0, l = iframeList.length; i < l; i++) { + var obj = iframeList.get(i), + r = tools.getAbs(obj), + dragMask = $$("
    ", setting); + dragMask.appendTo($$("body", setting)); + root.dragMaskList.push(dragMask); + } + } + } + }, + //method of operate ztree dom + _view = { + addEditBtn: function (setting, node) { + if (node.editNameFlag || $$(node, consts.id.EDIT, setting).length > 0) { + return; + } + if (!tools.apply(setting.edit.showRenameBtn, [setting.treeId, node], setting.edit.showRenameBtn)) { + return; + } + var aObj = $$(node, consts.id.A, setting), + editStr = ""; + aObj.append(editStr); + + $$(node, consts.id.EDIT, setting).bind('click', + function () { + if (!tools.uCanDo(setting) || tools.apply(setting.callback.beforeEditName, [setting.treeId, node], true) == false) return false; + view.editNode(setting, node); + return false; + } + ).show(); + }, + addRemoveBtn: function (setting, node) { + if (node.editNameFlag || $$(node, consts.id.REMOVE, setting).length > 0) { + return; + } + if (!tools.apply(setting.edit.showRemoveBtn, [setting.treeId, node], setting.edit.showRemoveBtn)) { + return; + } + var aObj = $$(node, consts.id.A, setting), + removeStr = ""; + aObj.append(removeStr); + + $$(node, consts.id.REMOVE, setting).bind('click', + function () { + if (!tools.uCanDo(setting) || tools.apply(setting.callback.beforeRemove, [setting.treeId, node], true) == false) return false; + view.removeNode(setting, node); + setting.treeObj.trigger(consts.event.REMOVE, [setting.treeId, node]); + return false; + } + ).bind('mousedown', + function (eventMouseDown) { + return true; + } + ).show(); + }, + addHoverDom: function (setting, node) { + if (data.getRoots().showHoverDom) { + node.isHover = true; + if (setting.edit.enable) { + view.addEditBtn(setting, node); + view.addRemoveBtn(setting, node); + } + tools.apply(setting.view.addHoverDom, [setting.treeId, node]); + } + }, + cancelCurEditNode: function (setting, forceName, isCancel) { + var root = data.getRoot(setting), + node = root.curEditNode; + + if (node) { + var inputObj = root.curEditInput, + newName = forceName ? forceName : (isCancel ? data.nodeName(setting, node) : inputObj.val()); + if (tools.apply(setting.callback.beforeRename, [setting.treeId, node, newName, isCancel], true) === false) { + return false; + } + data.nodeName(setting, node, newName); + var aObj = $$(node, consts.id.A, setting); + aObj.removeClass(consts.node.CURSELECTED_EDIT); + inputObj.unbind(); + view.setNodeName(setting, node); + node.editNameFlag = false; + root.curEditNode = null; + root.curEditInput = null; + view.selectNode(setting, node, false); + setting.treeObj.trigger(consts.event.RENAME, [setting.treeId, node, isCancel]); + } + root.noSelection = true; + return true; + }, + editNode: function (setting, node) { + var root = data.getRoot(setting); + view.editNodeBlur = false; + if (data.isSelectedNode(setting, node) && root.curEditNode == node && node.editNameFlag) { + setTimeout(function () { + tools.inputFocus(root.curEditInput); + }, 0); + return; + } + node.editNameFlag = true; + view.removeTreeDom(setting, node); + view.cancelCurEditNode(setting); + view.selectNode(setting, node, false); + $$(node, consts.id.SPAN, setting).html(""); + var inputObj = $$(node, consts.id.INPUT, setting); + inputObj.attr("value", data.nodeName(setting, node)); + if (setting.edit.editNameSelectAll) { + tools.inputSelect(inputObj); + } else { + tools.inputFocus(inputObj); + } + + inputObj.bind('blur', function (event) { + if (!view.editNodeBlur) { + view.cancelCurEditNode(setting); + } + }).bind('keydown', function (event) { + if (event.keyCode == "13") { + view.editNodeBlur = true; + view.cancelCurEditNode(setting); + } else if (event.keyCode == "27") { + view.cancelCurEditNode(setting, null, true); + } + }).bind('click', function (event) { + return false; + }).bind('dblclick', function (event) { + return false; + }); + + $$(node, consts.id.A, setting).addClass(consts.node.CURSELECTED_EDIT); + root.curEditInput = inputObj; + root.noSelection = false; + root.curEditNode = node; + }, + moveNode: function (setting, targetNode, node, moveType, animateFlag, isSilent) { + var root = data.getRoot(setting); + if (targetNode == node) return; + if (setting.data.keep.leaf && targetNode && !data.nodeIsParent(setting, targetNode) && moveType == consts.move.TYPE_INNER) return; + var oldParentNode = (node.parentTId ? node.getParentNode() : root), + targetNodeIsRoot = (targetNode === null || targetNode == root); + if (targetNodeIsRoot && targetNode === null) targetNode = root; + if (targetNodeIsRoot) moveType = consts.move.TYPE_INNER; + var targetParentNode = (targetNode.parentTId ? targetNode.getParentNode() : root); + + if (moveType != consts.move.TYPE_PREV && moveType != consts.move.TYPE_NEXT) { + moveType = consts.move.TYPE_INNER; + } + + if (moveType == consts.move.TYPE_INNER) { + if (targetNodeIsRoot) { + //parentTId of root node is null + node.parentTId = null; + } else { + if (!data.nodeIsParent(setting, targetNode)) { + data.nodeIsParent(setting, targetNode, true); + targetNode.open = !!targetNode.open; + view.setNodeLineIcos(setting, targetNode); + } + node.parentTId = targetNode.tId; + } + } + + //move node Dom + var targetObj, target_ulObj; + if (targetNodeIsRoot) { + targetObj = setting.treeObj; + target_ulObj = targetObj; + } else { + if (!isSilent && moveType == consts.move.TYPE_INNER) { + view.expandCollapseNode(setting, targetNode, true, false); + } else if (!isSilent) { + view.expandCollapseNode(setting, targetNode.getParentNode(), true, false); + } + targetObj = $$(targetNode, setting); + target_ulObj = $$(targetNode, consts.id.UL, setting); + if (!!targetObj.get(0) && !target_ulObj.get(0)) { + var ulstr = []; + view.makeUlHtml(setting, targetNode, ulstr, ''); + targetObj.append(ulstr.join('')); + } + target_ulObj = $$(targetNode, consts.id.UL, setting); + } + var nodeDom = $$(node, setting); + if (!nodeDom.get(0)) { + nodeDom = view.appendNodes(setting, node.level, [node], null, -1, false, true).join(''); + } else if (!targetObj.get(0)) { + nodeDom.remove(); + } + if (target_ulObj.get(0) && moveType == consts.move.TYPE_INNER) { + target_ulObj.append(nodeDom); + } else if (targetObj.get(0) && moveType == consts.move.TYPE_PREV) { + targetObj.before(nodeDom); + } else if (targetObj.get(0) && moveType == consts.move.TYPE_NEXT) { + targetObj.after(nodeDom); + } + + //repair the data after move + var i, l, + tmpSrcIndex = -1, + tmpTargetIndex = 0, + oldNeighbor = null, + newNeighbor = null, + oldLevel = node.level; + var oldChildren = data.nodeChildren(setting, oldParentNode); + var targetParentChildren = data.nodeChildren(setting, targetParentNode); + var targetChildren = data.nodeChildren(setting, targetNode); + if (node.isFirstNode) { + tmpSrcIndex = 0; + if (oldChildren.length > 1) { + oldNeighbor = oldChildren[1]; + oldNeighbor.isFirstNode = true; + } + } else if (node.isLastNode) { + tmpSrcIndex = oldChildren.length - 1; + oldNeighbor = oldChildren[tmpSrcIndex - 1]; + oldNeighbor.isLastNode = true; + } else { + for (i = 0, l = oldChildren.length; i < l; i++) { + if (oldChildren[i].tId == node.tId) { + tmpSrcIndex = i; + break; + } + } + } + if (tmpSrcIndex >= 0) { + oldChildren.splice(tmpSrcIndex, 1); + } + if (moveType != consts.move.TYPE_INNER) { + for (i = 0, l = targetParentChildren.length; i < l; i++) { + if (targetParentChildren[i].tId == targetNode.tId) tmpTargetIndex = i; + } + } + if (moveType == consts.move.TYPE_INNER) { + if (!targetChildren) { + targetChildren = data.nodeChildren(setting, targetNode, []); + } + if (targetChildren.length > 0) { + newNeighbor = targetChildren[targetChildren.length - 1]; + newNeighbor.isLastNode = false; + } + targetChildren.splice(targetChildren.length, 0, node); + node.isLastNode = true; + node.isFirstNode = (targetChildren.length == 1); + } else if (targetNode.isFirstNode && moveType == consts.move.TYPE_PREV) { + targetParentChildren.splice(tmpTargetIndex, 0, node); + newNeighbor = targetNode; + newNeighbor.isFirstNode = false; + node.parentTId = targetNode.parentTId; + node.isFirstNode = true; + node.isLastNode = false; + + } else if (targetNode.isLastNode && moveType == consts.move.TYPE_NEXT) { + targetParentChildren.splice(tmpTargetIndex + 1, 0, node); + newNeighbor = targetNode; + newNeighbor.isLastNode = false; + node.parentTId = targetNode.parentTId; + node.isFirstNode = false; + node.isLastNode = true; + + } else { + if (moveType == consts.move.TYPE_PREV) { + targetParentChildren.splice(tmpTargetIndex, 0, node); + } else { + targetParentChildren.splice(tmpTargetIndex + 1, 0, node); + } + node.parentTId = targetNode.parentTId; + node.isFirstNode = false; + node.isLastNode = false; + } + data.fixPIdKeyValue(setting, node); + data.setSonNodeLevel(setting, node.getParentNode(), node); + + //repair node what been moved + view.setNodeLineIcos(setting, node); + view.repairNodeLevelClass(setting, node, oldLevel); + + //repair node's old parentNode dom + if (!setting.data.keep.parent && oldChildren.length < 1) { + //old parentNode has no child nodes + data.nodeIsParent(setting, oldParentNode, false); + oldParentNode.open = false; + var tmp_ulObj = $$(oldParentNode, consts.id.UL, setting), + tmp_switchObj = $$(oldParentNode, consts.id.SWITCH, setting), + tmp_icoObj = $$(oldParentNode, consts.id.ICON, setting); + view.replaceSwitchClass(oldParentNode, tmp_switchObj, consts.folder.DOCU); + view.replaceIcoClass(oldParentNode, tmp_icoObj, consts.folder.DOCU); + tmp_ulObj.css("display", "none"); + + } else if (oldNeighbor) { + //old neighbor node + view.setNodeLineIcos(setting, oldNeighbor); + } + + //new neighbor node + if (newNeighbor) { + view.setNodeLineIcos(setting, newNeighbor); + } + + //repair checkbox / radio + if (!!setting.check && setting.check.enable && view.repairChkClass) { + view.repairChkClass(setting, oldParentNode); + view.repairParentChkClassWithSelf(setting, oldParentNode); + if (oldParentNode != node.parent) + view.repairParentChkClassWithSelf(setting, node); + } + + //expand parents after move + if (!isSilent) { + view.expandCollapseParentNode(setting, node.getParentNode(), true, animateFlag); + } + }, + removeEditBtn: function (setting, node) { + $$(node, consts.id.EDIT, setting).unbind().remove(); + }, + removeRemoveBtn: function (setting, node) { + $$(node, consts.id.REMOVE, setting).unbind().remove(); + }, + removeTreeDom: function (setting, node) { + node.isHover = false; + view.removeEditBtn(setting, node); + view.removeRemoveBtn(setting, node); + tools.apply(setting.view.removeHoverDom, [setting.treeId, node]); + }, + repairNodeLevelClass: function (setting, node, oldLevel) { + if (oldLevel === node.level) return; + var liObj = $$(node, setting), + aObj = $$(node, consts.id.A, setting), + ulObj = $$(node, consts.id.UL, setting), + oldClass = consts.className.LEVEL + oldLevel, + newClass = consts.className.LEVEL + node.level; + liObj.removeClass(oldClass); + liObj.addClass(newClass); + aObj.removeClass(oldClass); + aObj.addClass(newClass); + ulObj.removeClass(oldClass); + ulObj.addClass(newClass); + }, + selectNodes: function (setting, nodes) { + for (var i = 0, l = nodes.length; i < l; i++) { + view.selectNode(setting, nodes[i], i > 0); + } + } + }, + + _z = { + tools: _tools, + view: _view, + event: _event, + data: _data + }; + $.extend(true, $.fn.zTree.consts, _consts); + $.extend(true, $.fn.zTree._z, _z); + + var zt = $.fn.zTree, + tools = zt._z.tools, + consts = zt.consts, + view = zt._z.view, + data = zt._z.data, + event = zt._z.event, + $$ = tools.$; + + data.exSetting(_setting); + data.addInitBind(_bindEvent); + data.addInitUnBind(_unbindEvent); + data.addInitCache(_initCache); + data.addInitNode(_initNode); + data.addInitProxy(_eventProxy); + data.addInitRoot(_initRoot); + data.addZTreeTools(_zTreeTools); + + var _cancelPreSelectedNode = view.cancelPreSelectedNode; + view.cancelPreSelectedNode = function (setting, node) { + var list = data.getRoot(setting).curSelectedList; + for (var i = 0, j = list.length; i < j; i++) { + if (!node || node === list[i]) { + view.removeTreeDom(setting, list[i]); + if (node) break; + } + } + if (_cancelPreSelectedNode) _cancelPreSelectedNode.apply(view, arguments); + } + + var _createNodes = view.createNodes; + view.createNodes = function (setting, level, nodes, parentNode, index) { + if (_createNodes) { + _createNodes.apply(view, arguments); + } + if (!nodes) return; + if (view.repairParentChkClassWithSelf) { + view.repairParentChkClassWithSelf(setting, parentNode); + } + } + + var _makeNodeUrl = view.makeNodeUrl; + view.makeNodeUrl = function (setting, node) { + return setting.edit.enable ? null : (_makeNodeUrl.apply(view, arguments)); + } + + var _removeNode = view.removeNode; + view.removeNode = function (setting, node) { + var root = data.getRoot(setting); + if (root.curEditNode === node) root.curEditNode = null; + if (_removeNode) { + _removeNode.apply(view, arguments); + } + } + + var _selectNode = view.selectNode; + view.selectNode = function (setting, node, addFlag) { + var root = data.getRoot(setting); + if (data.isSelectedNode(setting, node) && root.curEditNode == node && node.editNameFlag) { + return false; + } + if (_selectNode) _selectNode.apply(view, arguments); + view.addHoverDom(setting, node); + return true; + } + + var _uCanDo = tools.uCanDo; + tools.uCanDo = function (setting, e) { + var root = data.getRoot(setting); + if (e && (tools.eqs(e.type, "mouseover") || tools.eqs(e.type, "mouseout") || tools.eqs(e.type, "mousedown") || tools.eqs(e.type, "mouseup"))) { + return true; + } + if (root.curEditNode) { + view.editNodeBlur = false; + root.curEditInput.focus(); + } + return (!root.curEditNode) && (_uCanDo ? _uCanDo.apply(view, arguments) : true); + } +})(jQuery); \ No newline at end of file diff --git a/js/jquery.ztree.exedit.min.js b/js/jquery.ztree.exedit.min.js index fbd84c6..7753124 100644 --- a/js/jquery.ztree.exedit.min.js +++ b/js/jquery.ztree.exedit.min.js @@ -1 +1 @@ -!function(fe){var Ee={event:{DRAG:"ztree_drag",DROP:"ztree_drop",RENAME:"ztree_rename",DRAGMOVE:"ztree_dragmove"},id:{EDIT:"_edit",INPUT:"_input",REMOVE:"_remove"},move:{TYPE_INNER:"inner",TYPE_PREV:"prev",TYPE_NEXT:"next"},node:{CURSELECTED_EDIT:"curSelectedNode_Edit",TMPTARGET_TREE:"tmpTargetzTree",TMPTARGET_NODE:"tmpTargetNode"}},s={onHoverOverNode:function(e,t){var o=Re.getSetting(e.data.treeId),d=Re.getRoot(o);d.curHoverNode!=t&&s.onHoverOutNode(e),d.curHoverNode=t,be.addHoverDom(o,t)},onHoverOutNode:function(e,t){var o=Re.getSetting(e.data.treeId),d=Re.getRoot(o);d.curHoverNode&&!Re.isSelectedNode(o,d.curHoverNode)&&(be.removeTreeDom(o,d.curHoverNode),d.curHoverNode=null)},onMousedownNode:function(e,t){var o,d,Z=Re.getSetting(e.data.treeId),$=Re.getRoot(Z),J=Re.getRoots();if(2==e.button||!Z.edit.enable||!Z.edit.drag.isCopy&&!Z.edit.drag.isMove)return!0;var r=e.target,n=Re.getRoot(Z).curSelectedList,ee=[];if(Re.isSelectedNode(Z,t))for(o=0,d=n.length;o",Z),t=0,o=ee.length;tZ.edit.drag.maxShowNodeNum-1||((r=Pe("
  • ",Z)).append(Pe(d,he.id.A,Z).clone()),r.css("padding","0"),r.children("#"+d.tId+he.id.A).removeClass(he.node.CURSELECTED),te.append(r),t==Z.edit.drag.maxShowNodeNum-1&&(r=Pe("
  • ...
    • ",Z),te.append(r)));te.attr("id",ee[0].tId+he.id.UL+"_tmp"),te.addClass(Z.treeObj.attr("class")),te.appendTo(ie),(oe=Pe("",Z)).attr("id","zTreeMove_arrow_tmp"),oe.appendTo(ie),Z.treeObj.trigger(he.event.DRAG,[e,Z.treeId,ee])}if(1==$.dragFlag){if(de&&oe.attr("id")==e.target.id&&ue&&e.clientX+ae.scrollLeft()+2>fe("#"+ue+he.id.A,de).offset().left){var s=fe("#"+ue+he.id.A,de);e.target=0Z.edit.drag.borderMin,b=fZ.edit.drag.borderMin,R=EZ.edit.drag.borderMin,P=IZ.edit.drag.borderMin,C=T>Z.edit.drag.borderMin&&f>Z.edit.drag.borderMin&&E>Z.edit.drag.borderMin&&I>Z.edit.drag.borderMin,w=h&&se.treeObj.scrollTop()<=0,M=b&&se.treeObj.scrollTop()+se.treeObj.height()+10>=m,_=R&&se.treeObj.scrollLeft()<=0,O=P&&se.treeObj.scrollLeft()+se.treeObj.width()+10>=p;if(e.target&&Ie.isChildOrSelf(e.target,se.treeId)){for(var D=e.target;D&&D.tagName&&!Ie.eqs(D.tagName,"li")&&D.id!=se.treeId;)D=D.parentNode;var y=!0;for(t=0,o=ee.length;tse.edit.drag.autoOpenTime&&Ie.apply(se.callback.beforeDragOpen,[se.treeId,L],!0)&&(be.switchNode(se,L),se.edit.drag.autoExpandTrigger&&se.treeObj.trigger(he.event.EXPAND,[se.treeId,L]))},se.edit.drag.autoOpenTime+50),window.zTreeMoveTargetNodeTId=L.tId)}}else F()}else ve=he.move.TYPE_INNER,de&&Ie.apply(se.edit.drag.inner,[se.treeId,ee,null],!!se.edit.drag.inner)?de.addClass(he.node.TMPTARGET_TREE):de=null,oe.css({display:"none"}),window.zTreeMoveTimer&&(clearTimeout(window.zTreeMoveTimer),window.zTreeMoveTargetNodeTId=null);ce=ue,Ne=ve,Z.treeObj.trigger(he.event.DRAGMOVE,[e,Z.treeId,ee])}return!1}function Te(d){if(window.zTreeMoveTimer&&(clearTimeout(window.zTreeMoveTimer),window.zTreeMoveTargetNodeTId=null),Ne=ce=null,ae.unbind("mousemove",s),ae.unbind("mouseup",Te),ae.unbind("selectstart",c),ie.css("cursor",""),de&&(de.removeClass(he.node.TMPTARGET_TREE),ue&&fe("#"+ue+he.id.A,de).removeClass(he.node.TMPTARGET_NODE+"_"+he.move.TYPE_PREV).removeClass(he.node.TMPTARGET_NODE+"_"+Ee.move.TYPE_NEXT).removeClass(he.node.TMPTARGET_NODE+"_"+Ee.move.TYPE_INNER)),Ie.showIfameMask(Z,!1),J.showHoverDom=!0,0!=$.dragFlag){var e,t,o;for(e=$.dragFlag=0,t=ee.length;e",e);l.appendTo(Pe("body",e)),o.dragMaskList.push(l)}}},view:{addEditBtn:function(e,t){if(!(t.editNameFlag||0