Перетащите узел из jstree на внешний элемент div, а затем выполните действие при его удалении. - PullRequest
4 голосов
/ 19 мая 2011

У меня есть работающая jstree, и теперь я хочу иметь возможность перетаскивать определенные типы узлов во внешний элемент div (содержащий диаграмму, сгенерированную старшими диаграммами). Я на самом деле не хочу, чтобы узел был удален из дерева, и при этом я не хочу копию узла. Я просто хочу, чтобы действие удаления узла обновляло диаграмму, используя идентификатор узла.

Я думаю, что могу немного поработать над обновлением графика, но это процесс перетаскивания с помощью jstree, который я нахожу немного запутанным. Кроме того, я хочу, чтобы только некоторые типы узлов были перетаскиваемыми (любые с атрибутом rel = "ds").

Я немного борюсь с этим, и не очень далеко. Вот куда я попал:

$("#statstree").jstree({ 
       "json_data" : {
                "ajax" : {
                    "url" : "test.json",
                    "data" : function (n) { 
                        return { id : n.attr ? n.attr("id") : 0 }; 
                    },
                    "progressive_render" : true
                }
            },
            "types" : {
                "valid_children" : [ "root" ],
                "types" : {
                    "folder" : {
                        "icon" : { 
                            "image" : "images/folder.png" 
                        },
                        "valid_children" : [ "default" ],
                        //"max_depth" : 2,
                        "hover_node" : true,
                        "show_checkboxes" : false
                    },
                    "default" : {
                        "icon" : { 
                            "image" : "images/folder.png"
                        },
                        "valid_children" : [ "default" ]
                    },
                    "hover_node" : false
                }
            },
            "themes" : {
                "theme" : "classic",
                "dots" : false,
                "icons" : true
            },
            "core" : { "html_titles" : true },

            "dnd" : {
                "drop_target" : "#test_area",
                "drop_finish" : function (data) {
                    if(data.o.attr("rel") === "ds") {
                      //update chart with new data here?
                      //using data.o.attr("id")
                    }
                }
            },
            "crrm" : { move : { check_move : function (m) { return false; } } },

            "plugins" : ["themes","json_data","dnd","ui","types","crrm"]
        });

Я где-то читал, что привязка события 'before.jstree' может помочь в блокировании перетаскивания определенных узлов (и бита crrm тоже). Но я думаю, что делаю это неправильно. Похоже, что «start_drag» не имеет доступа к data.args [0]:

$("#statstree").bind("before.jstree", function (e, data) {
            if(data.func === "start_drag" && data.args[0].parent("li").attr("rel") != "ds") {
                e.stopImmediatePropagation();
                return false;
            }
        });

У кого-нибудь есть идеи, как мне справиться с этой задачей?

Приветствия:)

РЕДАКТИРОВАТЬ: С тех пор я разработал, как остановить узлы не 'ds', отбрасываемые в области:

"drag_check" : function (data) {
                    if(data.r.attr("rel") != "ds") {
                        return false;
                    }
                    return { 
                        after : false, 
                        before : false, 
                        inside : true 
                    };
                }

Я уточню свой вопрос сейчас:

Как я могу получить идентификатор цели, если у меня есть несколько drop_targets? "drop_target": "# testarea1, # testarea2"

РЕДАКТИРОВАТЬ 2

Дох, отвечая на мои вопросы, пока я иду вперед! И я сидел, уставившись на это целую вечность. Это все приходит ко мне в одно мгновение:

data.r.attr ( "ID")

Редактировать 3

Теперь единственная оставшаяся проблема заключается в том, что хотя все узлы, которые не имеют атрибута rel = "ds", не могут быть "отброшены" во внешний блок / диаграмму, они все равно показывают зеленую галочку jstree при наведении курсора на разрешенная площадь / с Есть идеи, как этого избежать?

1 Ответ

1 голос
/ 02 августа 2011

Проверьте параметр valid_children .

...