Question

extjs 如何实现拖拽

Answer 1

简单的extjs自带的例子里有，如果负责的需要你要自定义，给你给例子作为参考

需要实现两个drag、drog两个类
给你个例子参考
/*
*************************************************************************
*控制控件拖出
*
************************************************************************
*/
Ext.define('Mocoolka.ux.MKPanelDrag', {
extend: 'Ext.dd.DragZone',

/**
* @Property mkdrag
* 如果组名指定,拖落发生在同组名之间，不同组名不能落
*/
ddGroup: 'mkdrag',
constructor: function () { },

/**
* @method init
* MKPanelDrag的构造方法，必须在panel渲染后调用
* @param {Object} panel 关联的panel
* @private
*/
init: function (panel) {

if (panel.nodeType) {
Mocoolka.ux.MKPanelDrag.superclass.init.apply(this, arguments);//调用祖类init

} else {
if (panel.rendered) {//已渲染
Mocoolka.ux.MKPanelDrag.superclass.constructor.call(this, panel.getEl());//调用祖类构造方法
} else {//未渲染
panel.on('afterrender', this.init, this, { single: true });//增加事件
}
}
},
/**
* @method afterDragOver
* 拖动完成后触发
* @param {Object} target panel落下的目标
* @private
*/
afterDragOver: function (target, e, id) {

},
scroll: false,

/**
* @method afterDragOver
* 在鼠标按下时触发这个方法，判断目标是否可以拖动
* 如果可以拖动，收集可拖动对象的数据，返回包含我们指定数据的对象
* ddel属性是一个提供拖动对象视图的dom节点
* @param {Object} target panel落下的目标
* @private
*/
getDragData: function (e) {

var t = e.getTarget(".button-draggable");//判断目标是否可以拖动

if (t) {
e.stopEvent();

//Opera应急代码
if (Ext.isOpera) {
Ext.fly(t.getEl()).on('mousemove', function (e1) {
t.style.visibility = 'hidden';
Ext.defer(function () {
t.style.visibility = '';
}, 1);
}, null, { single: true });
}

//得到目标对象,建立一个ddel
var f = Ext.getCmp(t.id);

var d = document.createElement('div');

d.className = 'x-form-text';
d.appendChild(document.createTextNode(f.text));
Ext.fly(d).setWidth(f.getEl().getWidth());
return {
field: f,
ddel: d
};
}
},

/**
* @method getRepairXY
* 当落失败时，提供回到原来位置的坐标
* @private
*/
getRepairXY: function () {
return this.dragData.field.getEl().getXY();
}
});
/*
*************************************************************************
*编辑窗体拖动落区域控制
*
************************************************************************
*/
Ext.define('Mocoolka.ux.MKFieldDropZone', {
extend: 'Ext.dd.DropZone',
xtype: 'MKFieldDropZone',
constructor: function (cfg) {

cfg = cfg || {};

},
/**
* @method init
* MKFieldDropZone的构造方法，必须在panel渲染后调用
* @param {Object} panel 关联的panel
* @private
*/
init: function (panel) {
var me = this;

if (panel.nodeType) {

Mocoolka.ux.MKFieldDropZone.superclass.init.apply(this, arguments);
} else {
if (panel.rendered) {//如果渲染

Mocoolka.ux.MKFieldDropZone.superclass.constructor.call(this, panel.getEl());//调用祖类构造方法
//控制控件不能选择
//var i = Ext.fly(panel.getEl()).select('input');
//i.unselectable();
//var i1 = Ext.fly(panel.getEl()).select('textarea');
//i1.unselectable();
} else {

panel.on('afterlayout', me.init, me, { single: true });
}
}
},
/**
* @Property ddGroup
* 如果组名指定,拖落发生在同组名之间，不同组名不能落
*/
ddGroup: 'mkdrag',

/**
* @Property containerScroll
* 如果鼠标落在屏幕边缘，容器是否自动滚动
*/

containerScroll: true,
/**
* @method getTargetFromEvent
* 判断落下的目标，返回目标。这里的判断顺序是inpt、textarea、button-draggable、panel本身
* @param {Object} e 目标容器，包含多个
* @private
*/
getTargetFromEvent: function (e) {

var me = this;

var panel = e.getTarget('input');

if (panel)
return panel;
var panel = e.getTarget('textarea');

if (panel)
return panel;
panel = e.getTarget('fieldset');
if (panel)
return panel;

panel = Ext.getCmp(this.id);
panel = panel.down('mkeditpanel');
if (panel)
return panel;

},

/**
* @method getTargetFromEvent
* 当拖动对象进入panel时触发这个方法，判断是否可以落下,如果可以落下，对落下目标加样式
* @param {Object} e 目标容器，包含多个
* @private
*/
onNodeEnter: function (target, dd, e, dragData) {

delete this.dropOK;
if (!target) {

return;
}

this.dropOK = true;

if (target.xtype == "mkeditpanel") {
}
else {
Ext.fly(target).addCls("mk-drop-target-active");
}

},

/**
* @method onNodeOver
* 当拖动对象在panel上时触发这个方法，返回是否能落下
* @param {target} e 目标容器，包含多个
* @private
*/
onNodeOver: function (target, dd, e, dragData) {
return this.dropOK ? this.dropAllowed : this.dropNotAllowed;
},

/**
* @method onNodeOut
* 当拖动对象离开在panel上时触发这个方法,移除落目标样式
* @param {target} e 目标容器，包含多个
* @private
*/
onNodeOut: function (target, dd, e, dragData) {

if (target.xtype == "mkeditpanel") {
}
else {
Ext.fly(target).removeCls('mk-drop-target-active');
}
},
/**
* @method onNodeOut
* 当拖动对象落下时触发这个方法,移除落目标样式
* @param {target} e 目标容器，包含多个
* @private
*/
onNodeDrop: function (target, dd, e, dragData) {

dd.afterDragOver = function () {

};
var view;
if (dragData.view)
view = dragData.view;
else
view = dragData.field;
var view = view.up("mkdefineeditpanel");
var me = view.down("mkeditpanel");//得到设计船体对象

var panel = me;

if (this.dropOK) {//如果可以落

var t = target;

if (t) {

var end = true;
if (me.dragend == false)//是否放置在当前组件前
end = false;
e.stopEvent();

var iscolumn = false;
var field = null;
var sourcedata;

if (t.xtype == 'mkeditpanel') {//如果目标是设计窗体

}
else {//如果是输入组件

}

me.begintask();//重绘屏幕

return true;

}

return false;
}
},

onCellDrop: Ext.emptyFn
});