Требуются: направления / идеи для пользовательской реализации перетаскивания дерева в дерево в ExtJS - PullRequest
Новая
       24

Требуются: направления / идеи для пользовательской реализации перетаскивания дерева в дерево в ExtJS

2 голосов
/ 18 августа 2010

Мне нужна некоторая комбинированная функциональность, связанная с перетаскиванием между двумя деревьями в ExtJS .

Первая необходимая функция очень проста и является встроеннойПеретаскивание объектов, изолированных только на одно дерево .

Standard tree drag'n'drop

Вторая необходимая функция - это то, что я не хочупользователь сможет перетащить узел из левого дерева и отбросить его в любом узле правого дерева .

One way non destructive drag'n'drop

Действие не должно удалять узел из левого дерева , что создает возможность перетаскивания этого же узла из левого дерева для нескольких мест в правом дереве .

Мой вопрос: Какой подход я должен использовать, чтобы объединить эти две функции, используя существующие возможности в TreePanel объект, не изобретая колесо снова?Я не ищу полное решение (хотя было бы неплохо ;-)), а скорее как обрабатывать зоны перетаскивания, события и т. Д.

1 Ответ

3 голосов
/ 03 сентября 2010

Хорошо.Некоторое время назад я думал об этом, и мне кажется, что мне подходит следующий подход:)

Я настроил дерево left так: 

listeners:
{
    beforenodedrop: function (dropEvent) {
        // Does this node come from the right tree?
        if (dropEvent.source.tree.id !== dropEvent.tree.id) {
            // The node should be discarded.
            dropEvent.dropNode.parentNode.removeChild(dropEvent.dropNode, true);

            // The node has been discarded, return drop succeeded.
            dropEvent.dropStatus = true;
            return false;
        }
        return true;
    },  
    nodedragover: function (dragevent) {
        // If the node comes from the right tree, it is allowed to be dropped here.
        if (dragevent.source.tree.id !== dragevent.tree.id) {
            return true;
        }
        // A node from this tree is not allowed to be dropped.
        return false;
    }
}

Дерево вправо настроено так: 

listeners:
{   
    beforenodedrop: function (dropEvent) {
        // Does this node come from the left tree?
        if (dropEvent.source.tree.id !== dropEvent.tree.id) {
            // The node should be cloned and inserted in the right tree.

            // Copy the node.
            var node = dropEvent.dropNode; // the node that was dropped
            var nodeCopy = new Ext.tree.TreeNode( // copy it
                Ext.apply({}, node.attributes)
            );
            // Match the id's.
            nodeCopy.id = Ext.id(null,'newnode') + '_' + node.id;

            // Find the right place to put it.
            if (dropEvent.target.parentNode === dropEvent.tree.getRootNode()) {
                // The node is placed on a folder, thus drop it there.
                dropEvent.target.appendChild(nodeCopy);
            } else {
                // The node is placed inside a folder, thus place it in there.
                dropEvent.target.parentNode.appendChild(nodeCopy);
            }

            // The node has been dropped, return okay and stop further process.
            dropEvent.dropStatus = true;
            return false;
        }           
        // Just use the normal builtin drag and drop.
        return true;
    }
}

Оба дерева были настроены для включения Drag'n'Drop: 

enableDD: true

Все узлы листаследующая конфигурация: 

allowDrop: true,
draggable: true

Все папки установлены на: 

allowDrop: true,
draggable: false

Вывод таков: я решил переопределить некоторые встроенные методы drag'n'drop в древовидная панель при сохранении встроенной функциональности.

...