拖放 Jstree 确认

Question

我开发了一个出现的确认警报 do you want to move this file or folder ?

如果我单击 no：它 return 到默认文件夹。

如果 yes 它将转到新文件夹。

所以我的问题是当我拖放 parent 文件夹时 会出现确认消息，如果我单击 no 则不会移动停止，这意味着文件夹将移动到新文件夹下

例如我有：

根目录 1
- 文件夹1
  - 孩子 1
ROOT2

在我的 jstree 中，我有 Root1 和 Root2 节点，它们是 parent 节点因此，当我将 child1 移动到 Root2 时，它工作正常。但是当我将 ROOT2 移动到 ROOT1 时，当我单击 no

时它并没有停止移动

这是我的代码：

// html demo
$('#tree').jstree({
"core" : {
"animation" : 0,
"check_callback" : true,
"data" : [
{ "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
{ "id" : "ajson11", "parent" : "#", "text" : "Simple root 1 node" },
{ "id" : "ajson12", "parent" : "#", "text" : "Simple root 2 node" },
{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
{ "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1","type" : "file" },
{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2","type" : "file" },
]
},
  "types" : {
    "#" : {
      "max_children" : 1, 
      "max_depth" : 4, 
      "valid_children" : ["root"]
    },
    "root" : {
      "icon" : "/static/3.1.1/assets/images/tree_icon.png",
      "valid_children" : ["default"]
    },
    "default" : {
      "valid_children" : ["default","file"]
    },
    "file" : {
      "icon" : "glyphicon glyphicon-file",
      "valid_children" : []
    }
  },
"plugins" : [
"contextmenu", "dnd", "types"
]
});


var Parent = 0;
var newParent = 0;
var Pos = 0;
var newPos = 0;

$(document).on('dnd_start.vakata', function (event, data) {
    sel = "li#"+ data.data.nodes[0] +".jstree-node";
    Parent = $('#tree').jstree(true).get_node(data.data.nodes[0]).parent;
    Pos = $(sel).index();
});

$(document).on('dnd_stop.vakata', function (event, data) {
    node = data.data.origin.get_node(data.data.nodes[0]);
    if (node.type == "root")
    {
        return false;
    }

    if (confirm("Voulez vous vraiment deplacer le fichier ou le dossier ?") === false)
    {
        $('#tree').jstree(true).move_node(node,Parent,Pos);
        return false;
    }
    sel = "li#"+ data.data.nodes[0] +".jstree-node";
    newPos =  $(sel).index();
    newParent = node.parent; 
});

和this就是例子

Answer 1

不需要使用dnd_*事件，最好使用check_callback函数：

"check_callback" :  function (op, node, par, pos, more) {
    if ((op === "move_node" || op === "copy_node") && node.type && node.type == "root") {
        return false;
    }
    if ((op === "move_node" || op === "copy_node") && more && more.core && !confirm('Are you sure ...')) {
        return false;
    }
    return true;
},

这是您更新后的演示：http://jsfiddle.net/bq8xme0y/6/

您还可以从设置 dnd.is_draggable 功能中获益 - 以防止某些节点被拖动（在我看来这是您需要的其他东西）。

拖放 Jstree 确认

Drag and Drop Jstree confirmation

jquery

drag-and-drop

jstree