Question

编辑：我删除了与被问题无关的代码

我试图模仿这里的文档中给出的示例：http://docs.sencha.com/ext-js/4-1/#!/example/dd/dragdropzones.html。

当我在数据视图创建的任何div中单击并拖动时，我开始选择文本而不是拖动数据视图项。

我已经在这里和那里放置了console.log（）语句来验证代码是否正在触发。 getDragData函数返回的所有元素都包含信息。

我尝试添加“draggable：true”和“enableDrag：true”。没有人允许我拖动div。但是，“draggable：true”确实使得当我点击并拖动时我不再选择文本了。

我相信这是唯一与此问题相关的代码： SearchDataView.js

Ext.require('Client.store.SearchStore');

Ext.define('Client.view.SearchDataView',
    {
        extend: 'Ext.view.View',
        alias: 'widget.SearchDataView',
        config:
            {
                store: Ext.create('Client.store.SearchStore'),
                tpl: '<tpl for=".">' +
                        '<div class="search-wrapper">' +
                            '<div class="search-icon">' +
                                '<img src="../../Images/icons/Person50x50.jpg" />' +
                            '</div>' +
                            '<div class="search-text">' +
                                '<span class="title">{FirstName} {LastName}</span>' +
                                '<span class="address">address, city, state  zip</span>' +
                                '<span class="info">DOB: 7/3/1970</span>' +
                            '</div>' +
                        '</div>' +
                     '</tpl>',
                itemSelector: 'div.search-wrapper',                
                emptyText: 'Nobody in database',
                deferEmptyText: false,
                singleSelect: true,
                listeners:
                    {
                        render: initializeSearchDragZone
                    }
            }
    }
);

function initializeSearchDragZone(v) {
    v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
        getDragData: function (e) {
            var sourceEl = e.getTarget(v.itemSelector, 10), d;
            if (sourceEl) {
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                return v.dragData = {
                    sourceEl: sourceEl,
                    repairXY: Ext.fly(sourceEl).getXY(),
                    ddel: d,
                    searchData: v.getRecord(sourceEl).data,
                    sourceStore: v.store
                }
            }
        },

        getRepairXY: function () {
            return this.dragData.repairXY;
        }
    });
}

Viewport.js

Ext.require('Client.view.SearchPanel');
Ext.require('Client.view.DesktopPanel');

Ext.define('Client.view.Viewport',
    {
        extend: 'Ext.container.Viewport',
        initComponent: function () {
            Ext.apply(this,
                {
                    layout: 'border',
                    items:
                        [
                            {
                                region: 'north',
                                margins: 5,
                                height: 30,
                                xtype: 'container'
                            },
                            {
                                region: 'west',
                                margins: '0 5 0 5',
                                flex: .25,
                                collapsible: true,
                                titleCollapse: true,
                                xtype: 'SearchPanel'
                            },
                            {
                                region: 'center',
                                xtype: 'DesktopPanel'
                            },
                            {
                                region: 'east',
                                margins: '0 5 0 5',
                                width: 200,
                                collapsible: true,
                                titleCollapse: true,
                                collapsed: true
                            },
                            {
                                region: 'south',
                                margins: '0 5 5 5',
                                flex: .3,
                                split: true
                            }
                        ]
                }
            );

            this.callParent(arguments);
        }
    }
);

SearchPanel

Ext.require('Client.view.SearchForm');
Ext.require('Client.view.SearchDataView');
Ext.require('Client.view.AddTrashForm');

Ext.define('Client.view.SearchPanel',
    {
        extend: 'Ext.panel.Panel',
        alias: 'widget.SearchPanel',
        config:
            {                
                items:
                    [
                        {
                            xtype: 'SearchForm'
                        },
                        {
                            xtype: 'SearchDataView'
                        },
                        {
                            xtype: 'AddTrashForm'
                        }

                    ]

            },
        cls: 'searchpanel'
    }
);

Answer 1

我将布局配置添加到SearchPanel，然后拖动开始工作：

layout:
    {
        type: 'vbox',
        align: 'stretch'
    }

它改变了我的一些布局，所以我现在必须调整css，但是拖动工作正在进行。

如何启用自定义拖放（ext js 4.1.3）

1 个答案: