Перетащите из дерева в div - PullRequest
Новая
       34

Перетащите из дерева в div

0 голосов
/ 01 августа 2010

Я пытаюсь реализовать перетаскивание senario из TreePanel extJs в div в теле страницы.Я следовал примеру Саки здесь .

Пока у меня есть следующий код: 

var contentAreas = new Array();
var tree = new Ext.tree.TreePanel({
                title : 'Widgets',
                useArrows: true,
                autoScroll: true,
                animate: true,
                enableDrag: true,
                border: false,
                layout:'fit',
                ddGroup:'t2div',
                loader:new Ext.tree.TreeLoader(),
                root:new Ext.tree.AsyncTreeNode({
                    expanded:true,
                    leaf:false,
                    text:'Tree Root',
                    children:children
                }),
                listeners:{
                    startdrag:function() {
                         $('.content-area').css("outline", "5px solid #FFE767");
                    },
                    enddrag:function() {
                        $('.content-area').css("outline", "0");
                    }
                }
            });

            var areaDivs = Ext.select('.content-area', true);
            Ext.each(areaDivs, function(el) {
                var dd = new Ext.dd.DropTarget(el, {
                    ddGroup:'t2div',
                    notifyDrop:function(ddt, e, node) {
                        alert('Drop');
                        return true;
                    } 
                });
                contentAreas[contentAreas.length] = dd;
            });

Перетаскивание начинается, и div подсвечивается, но когда я получаюпо сравнению с div он не отображается как действительная цель сброса, и падение не удается.

Это мой первый набег в extJS.Я JQuery насквозь, и я борюсь в данный момент.

Любая помощь будет признательна.

Ян

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

Кроме того, если я создаю панель с целевым объектом, это работает нормально.В чем разница между созданием элемента и выбором существующего элемента из DOM.Это, очевидно, где я иду не так, но я не мудрее.Я должен иметь возможность выбирать существующие элементы dom и превращать их в мишени для перетаскивания, чтобы приведенный ниже код не использовался.

Вот цель перетаскивания, которая работает 

var target = new Ext.Panel({
                renderTo: document.body
                ,layout:'fit'
                ,id:'target'
                ,bodyStyle:'font-size:13px'
                ,title:'Drop Target'
                ,html:'<div class="drop-target" '
                      +'style="border:1px silver solid;margin:20px;padding:8px;height:140px">'
                      +'Drop a node here. I\'m the DropTarget.</div>'

                // setup drop target after we're rendered
                ,afterRender:function() {
                    Ext.Panel.prototype.afterRender.apply(this, arguments);
                    this.dropTarget = this.body.child('div.drop-target');
                    var dd = new Ext.dd.DropTarget(this.dropTarget, {
                        // must be same as for tree
                         ddGroup:'t2div'

                        // what to do when user drops a node here
                        ,notifyDrop:function(dd, e, node) {
                            alert('drop');
                            return true;
                        } // eo function notifyDrop
                    });
                } 
            });

Ответы [ 3 ]

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

Смотрите, если добавление true в качестве второго параметра здесь имеет какое-либо значение: 

var areaDivs = Ext.select('.content-area', true);

В качестве косметического примечания, имя параметра e условно указывает объект события (как во втором аргументеnotifyDrop).Для элемента el более типично.Функционально не имеет значения, но выглядит странно для того, кто использовал код Ext, чтобы увидеть, как e передается в конструктор DropTarget.

0 голосов
/ 08 февраля 2011

Как я знаю, вы не можете установить DropZone для любого элемента Ext, только для компонента Ext.Так что это может быть вашей проблемой.Попробуйте использовать DropTarget вместо DropZone.

0 голосов
/ 01 августа 2010

Если у вас возникли проблемы с копированием такого рабочего примера, скопируйте его целиком, а затем построчно измените его в соответствии со своими потребностями - вы не ошибетесь.

...