LearningExtJS_new 之 DD 的施用学习(九)
日期：2014-05-16 浏览次数：20514 次
LearningExtJS_new 之 DD 的应用学习(九)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>Drag and drop</title> <link rel="stylesheet" type="text/css" href="../pubjs/ext/resources/css/ext-all.css"> <script type="text/javascript" src="../pubjs/ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../pubjs/ext/ext-all-debug.js"></script> <script type="text/javascript" src="./dragAndDropTest.js"></script> </head> <body> <div id="bigDrag" style="background:#aabbaa;width:100px;height:200px;overflow-y: hidden;float:left;"> <div id="dragMe" style="background:#00ff00;width:100px;height:100px;overflow-y: hidden;">This is the source here!!!</div> </div> <div id="dropMe" style="background:#00ff00;width:100px;height:200px;overflow-y: hidden;float:left;">This is the target here!!!</div> <h1>今天</h1> <ul id="today"> <li>逛商场</li> <li>理发</li> </ul> <h1>明天</h1> <ul id="tmrw"> <li>看医生</li> </ul> <div id="people" style="background:#aaffcc;width:200px;height:300px;overflow-y: hidden;float:left;"></div> <div id="detail" style="background:#ccffaa; overflow-y: hidden;float:left;"></div> </body> </html>
/**
* 一.最简单的调用拖放
* 1.DragSource 用来定义可以拖动的对象
* 2.DropTarget 用来定义可以放置的地方
* 1>使用notifyDrop.时返回true表示可以放置
* 3.修改notifyDrop在操作时增加元素操作
* 4.使用 dragZone进行一组元素中的单一元素操作
* 1>可以使用Ext.dd.Registry.register对各元素进行注册
* 5.使用dropZone对一组元素参允许放置地
* 1>对onNodeDrop方法进行重写以对元素进行操作
* 6.学习使用dataView.
* 1>使用getDragData方法返回移动的无素信息
* 2>动态对元素进行加载
*/
var ddMain = function(){
var _firstDragTest = function(){
new Ext.dd.DragSource("dragMe");
new Ext.dd.DropTarget("dropMe", {
notifyDrop : function() {
return true
}
});
var el = Ext.get("dropMe")
var cfg = {};
el.ddScrollConfig = cfg;
Ext.dd.ScrollManager.register(el);
};
//增加方法使每个节点捕捉方法
var _drop = function(dropNodeData,source,event,dragNodeData){
//原元素容器
var oldContainer = source.el.dom;
//现无素容器
var newContainer = this.getEl();
//原来元素
var nowEl = source.dragData.ddel;
//增加元素
oldContainer.removeChild(nowEl);
newContainer.appendChild(nowEl);
console.debug(dropNodeData,source,event,dragNodeData);
return true;
}
//根两个列表,可以把A列表中内容拖到B列表的内容中去.
var _useDDTest = function(){
//定义源
new Ext.dd.DragZone("today");
new Ext.dd.DragZone("tmrw");
//注册所有li元素可拖拉
var liTags = document.getElementsByTagName("li");
for(var i = 0;i < liTags.length;i++){
Ext.dd.Registry.register(liTags[i],{name:"ss"});
}
//定义目标
var cfg = {onNodeDrop:_drop};
new Ext.dd.DropZone("today",cfg);
new Ext.dd.DropZone("tmrw",cfg);
};
var orgJsonData = [[
1,
"java",
"sun",
"bj",
"image/de.png"
],[
2,
"oracle",
"oracle",
"fz",
"image/fr.png"
],[
3,
"vb.net",
"microsoft",
"ly",
"image/us.png"
]
];
//define a store
var personStore = new Ext.data.SimpleStore({
data:orgJsonData,
fields:["id","name","country","city","image"]
});
//use dataView 定义两个列表,A列表从数据库中加载,当A拖放到B时,自动信息加载到B上.
var _dataViewTest = function(){
//定义dataView用来保存记录信息
var people = new Ext.DataView({
tpl:new Ext.XTemplate(
'<tpl for=".">',
'<div class="person">',
'<h1>',
'{name}', //values 即store的record
'</h1>',
'<div>'
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
