1

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

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

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

我在这里和那里放置了 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;
        }
    });
}

视口.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);
        }
    }
);

搜索面板

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'
    }
);
4

1 回答 1

0

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

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

它改变了我的一些布局，所以我现在必须调整 css，但拖动是有效的。

于 2013-02-21T20:04:04.090 回答