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 storevar 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 height="64" src="{image}" />', '</div>', '</div>', '</tpl>' ), itemSelector: 'div.person', store:personStore }); //附加到people层上 people.render("people"); //定义返回值信息getDragData返回值信息 new Ext.dd.DragZone(people.getEl(), {getDragData : function(e){var container = e.getTarget("div.person",5,true);if(container){return {ddel:container.down("h1").dom,record:people.getRecord(container.dom)};}return false;}}); //定义form信息var winForm = new Ext.form.FormPanel({renderTo : "detail",width : 250,height : 200,defaultType : "textfield",items : [{fieldLabel : "姓名",name : "name"}, {fieldLabel : "国家",name : "country"}, {fieldLabel : "城市",name : "city"}],title:"个人信息中心"}); //加载from的notifyDrop信息new Ext.dd.DropTarget(winForm.getEl(), {notifyDrop : function(source,e,data) {//取数据var record = source.dragData.record;winForm.getForm().loadRecord(record);//删除原始对象//_deleteSourceEl(source,e,data);return true;}}); }, _deleteSourceEl = function(source,e,data){ //查找原容器 var oldConatiner = source.el.dom; //查找移动对象 var oldObj = source.dragData.ddel; var oObj = Ext.fly(oldObj).up("div"); //删除 //Ext.destroy(oObj);oObj.remove(); }return {init : function(){//Ext.dd.DragDropMgr.mode = Ext.dd.DragDropMgr.INTERSECT;_firstDragTest();//_useDDTest();_dataViewTest();//Ext.dd.ScrollManager.register("dragMe");}} }();Ext.onReady(ddMain.init,ddMain,true);