1

編集：質問に関係のないコードを削除しました

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

1 に答える 1

0

SearchPanelにレイアウト構成を追加し、ドラッグが機能し始めました。

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

レイアウトの一部が変更されるため、cssを調整する必要がありますが、ドラッグは機能しています。

于 2013-02-21T20:04:04.090 に答える