Extjs学习（4）：拖与放
1. 定义拖放
2. 组织拖放类
3. 下面要做的应用的效果图：汽车分类
1. 实现“拖”
为了配置车辆DIVs elements可拖拽状态，我们需要获得一个列表并循环实例化（DD）
Ext.onReady(function() {
// Create an object that we'll use to implement and override drag behaviors a little later
//所有拖放类的设计都是通过重写它的方法来实现的
var overrides = {};
// Configure the cars to be draggable
//小汽车啊，利用DomQuery方法查询小汽车容器里所有的div号，使他们可拖拽（draggable）
var carElements = Ext.get('cars').select('div');
Ext.each(carElements.elements, function(el) {
//创建一个新的DD实例，将要drap的小汽车组，这里在drop时候要用到
//这个实例继承Ext.apply，这是一个方便的方式给现有的对象来添加属性或方法
var dd = Ext.create('Ext.dd.DD', el, 'carsDDGroup', {
isTarget : false
});
//Apply the overrides object to the newly created instance of DD
Ext.apply(dd, overrides);
});
//大卡车啊
var truckElements = Ext.get('trucks').select('div');
Ext.each(truckElements.elements, function(el) {
var dd = Ext.create('Ext.dd.DD', el, 'trucksDDGroup', {
isTarget : false
});
Ext.apply(dd, overrides);
});
});
可以 用眼睛看一下drag节点是怎么变化的，
思考：拖拽过去会被粘贴，但不能拽错（验证有效性），且drop位置变化情况，CSS
2. 修复无效的drop：重置拖动这个动作中的样式属性
想使其：在鼠标移动时，drag element暂时消失，当还原时重新显示 （不用）
使用 Ext.Fx 来执行这个动作
为了实现修复，需要重写：b4StartDrag，onInvalidDrop，endDrag方法
var overrides = {
// Called the instance the element is dragged.
b4StartDrag : function() {
// Cache the drag element
if (!this.el) {
this.el = Ext.get(this.getEl());
}
//Cache the original XY Coordinates of the element, we'll use this later.
this.originalXY = this.el.getXY();
},
// Called when element is dropped in a spot without a dropzone, or in a dropzone without matching a ddgroup.
onInvalidDrop : function() {
// Set a flag to invoke the animated repair
this.invalidDrop = true;
},
// Called when the drag operation completes
endDrag : function() {
// Invoke the animation if the invalidDrop flag is set to true
if (this.invalidDrop === true) {
// Remove the drop invitation
this.el.removeCls('dropOK');
// Create the animation configuration object
var animCfgObj = {
easing : 'elasticOut',
duration : 1,
scope : this,
callback : function() {
// Remove the position attribute
this.el.dom.style.position = '';
}
};
// Apply the repair animation
this.el.setXY(this.originalXY[0], this.originalXY[1], animCfgObj);
delete this.invalidDrop;
}
},
实现效果：
3. 配置drop目标：
需要实例化 DDTarget 类
// Instantiate instances of Ext.dd.DDTarget for the cars and trucks container
var carsDDTarget = Ext.create('Ext.dd.DDTarget', 'cars','carsDDGroup');
var trucksDDTarget = Ext.create('Ext.dd.DDTarget', 'trucks', 'trucksDDGroup');
// Instantiate instances of DDTarget for the rented and repair drop target elements
var rentedDDTarget = Ext.create('Ext.dd.DDTarget', 'rented', 'carsDDGroup');
var repairDDTarget = Ext.create('Ext.dd.DDTarget', 'repair', 'carsDDGroup');
// Ensure that the rented and repair DDTargets will participate in the trucksDDGroup
rentedDDTarget.addToGroup('trucksDDGroup');
repairDDTarget.addToGroup('trucksDDGroup');
实现效果：
4. 完成drop
使用DOM工具（确保drag参数和drop参数准确，相等），需重写DD onDragDrop方法
//the drag elements will now will be moved from their parent element to the drop target.
var overrides = {
...
// Called upon successful drop of an element on a DDTarget with the same
onDragDrop : function(evtObj, targetElId) {
// Wrap the drop target element with Ext.Element
var dropEl = Ext.get(targetElId);
// Perform the node move only if the drag element's
// parent is not the same as the drop target
if (this.el.dom.parentNode.id != targetElId) {
// Move the element
dropEl.appendChild(this.el);
// Remove the drag invitation
this.onDragOut(evtObj, targetElId);
// Clear the styles
this.el.dom.style.position ='';
this.el.dom.style.top = '';
this.el.dom.style.left = '';
}
else {
// This was an invalid drop, initiate a repair
this.onInvalidDrop();
}
},
实现效果：
5. 添加drop请求：drag和drop的反馈
重写onDragEnter（）和onDragOut（）方法
var overrides = {
...
// Only called when the drag element is dragged over the a drop target with the
same ddgroup
onDragEnter : function(evtObj, targetElId) {
// Colorize the drag target if the drag node's parent is not the same as the
drop target
if (targetElId != this.el.dom.parentNode.id) {
this.el.addCls('dropOK');
}
else {
// Remove the invitation
this.onDragOut();
}
},
// Only called when element is dragged out of a dropzone with the same ddgroup
onDragOut : function(evtObj, targetElId) {
this.el.removeCls('dropOK');
}
};
实现效果：
6.其他的一些例子：使用drag和drop
GridPanel to GridPanel
Grid to FormPanel
Ext.form.Field to GridPanel cell
Use of DragZone and DropZone