1
編輯：我刪除了代碼，沒有爲這個問題無關緊要被要求如何啓用自定義的拖放（Ext JS的4.1.3）
我試圖模仿文檔中此處給出的示例：http://docs.sencha.com/ext-js/4-1/#!/example/dd/dragdropzones.html。
當我點擊並拖動任何由dataview創建的div時，我開始選擇文本而不是拖動dataview項目。
我已經把console.log（）語句放在這裏和那裏來驗證代碼是否正在觸發。所有由getDragData函數返回的元素都包含信息。
我曾嘗試添加「draggable：true」和「enableDrag：true」。兩人都不讓我拖動div。然而，「可拖動：真實」確實使得當我點擊並拖動時，我不再選擇文本。
我相信這是屬於問題的唯一代碼： 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'
}
);