Extjs 拖拽实验例子

最新推荐文章于 2018-04-23 17:59:22 发布
最新推荐文章于 2018-04-23 17:59:22 发布
阅读量812 收藏
点赞数
分类专栏： ExtJs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>拖拽实验</title> 

<!--基本引用文件-->
<link rel="Stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>   
<script type="text/javascript" src="../ext-all-debug.js"></script>   
<script type="text/javascript" src="../build/locale/ext-lang-zh_CN.js"></script> 

<!--基本样式-->
<style type="text/css">
 body{
  font-size:12px;margin: 10px;
 }
 .block {
  clear:left; 
  margin-top:50px; 
  border: solid 1px #000;
  height:160px;
  padding:20px 0 0 20px; 
 }
 .item {           
  border: 1px #000 solid;                       
  margin-right:10px;                                              
  width: 60px;           
  height: 40px;            
  text-align:center;           
  padding-top:20px;           
  color:White;                 
  float:left;           
  cursor:pointer;                  
 }               
 .BorderOver{
  border:dashed 2px #00f;
 }
</style>
</head>
<body>

<script type="text/javascript">

Ext.onReady(function() { 

 var proxy = new Ext.dd.DDProxy("proxy");//这一句就可以建立一个随便拖的东东，神奇吧
 //(ExtJs的拖动组件分二大类，DDProxy就是要拖动的东西，而DDTarget就是拖动后可以扔进去的目标容器区)
 //以下建立了三个拖动源DropSource(继承自DDProxy可以查看官方文档)，并标明gruop为dd      
 var proxy_red    =  new Ext.dd.DragSource('proxy_red', {group:'dd'});       
 var proxy_green  =  new Ext.dd.DragSource('proxy_green', { group:'dd' });       
 var proxy_black  =  new Ext.dd.DragSource('proxy_black', { group:'dd' });      
 
 //拖动完成的事件       
 proxy_red.afterDragDrop = function(target, e, id) {   
  var destEl = Ext.get(id);  
  var srcEl = Ext.get(this.getEl());           
  if (destEl.dom.id == "target2") {               
   if (srcEl.dom.id != "proxy_red") {                  
    destEl.dom.style.border = "solid #000 1px";                  
    alert("此区域仅接受red(红色)色块！");                   
    return false;               
   }           
  }           
  var sColor = srcEl.dom.id.split('_')[1];     //得取拖动源id的后面一部分，即proxy_red后面的red
  //destEl.dom.style.backgroundColor = sColor;   //设置目标id的背景色 
  //destEl.dom.style.border = "solid #000 1px";
  
  var beginX = destEl.getX();    //目标区块的X轴初始坐标
  var beginY = destEl.getY();    //目标区块的Y轴初始坐标  
  
  var eXY = e.getXY();  
  var dragtargetX = eXY[0];
  var dragtargetY = eXY[1];
  var X = dragtargetX - beginX;
  var Y = dragtargetY - beginY;
  alert("x:"+X);alert("y:"+Y);
  
   var TextField35378 = new Ext.form.TextField({id:"TextField35378",
   labelSeparator:":" ,labelStyle:"text-align:right",
   inputType: 'text', name: '姓名',
   allowBlank: true,
   fieldLabel: '姓名',
   hidden: false, hideLabel: false,
   width: 120, x: X, y: Y});
   Designer.formPanel.add(TextField35378);
   Designer.formPanel.doLayout();
   //Designer.target.add(TextField35378);
   //Designer.target.doLayout();
  //alert(destEl.getX());
  
 };       
 
 proxy_red.onDragEnter = function(e, id) {           
   Ext.get(id).dom.style.border = "dashed #00f 2px";           
   Ext.get(id).dom.style.backgroundColor = "#fff";       
 }
 
 proxy_red.onDragOut = function(e, id) {   
  Ext.get(id).dom.style.border = "solid #000 1px";       
 } 
 
 //为其它拖动源赋值同样的事件处理函数
 proxy_green.afterDragDrop = proxy_red.afterDragDrop;        
 proxy_black.afterDragDrop = proxy_red.afterDragDrop;
   
 proxy_green.onDragEnter = proxy_red.onDragEnter; 
 proxy_black.onDragEnter = proxy_red.onDragEnter;    
 
 proxy_green.onDragOut = proxy_red.onDragOut;     
 proxy_black.onDragOut = proxy_red.onDragOut;
 
 
 
 var target = new Ext.dd.DDTarget('target', 'dd');    
 //建立拖动目标区(这里的dd与上面拖动源的group:dd相同
 
 //只有相同group的DDProxy/DragSource才会接受)
 var target2 = new Ext.dd.DDTarget('target2', 'dd');  
 Designer.uxForm();
 
});
</script>

<script language="javascript">
Ext.namespace('Designer');
Designer.uxForm = function (){
  var formPanel = new Ext.form.FormPanel({  
 id:'formpanelid',
    header:false,
 frame:true,
 border:false,
 layout:"absolute",
 width :600,
 height :400, 
 renderTo:"uxform"
  });
  Designer.formPanel = formPanel;
 
  var formPanelDropTargetEl =  formPanel.body.dom;
 
  var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
        id:'targetid',
  group     : 'dd',
  notifyEnter : function(ddSource, e, data) {   
   //Add some flare to invite drop.
   //formPanel.body.stopFx();
   //formPanel.body.highlight();
  },
  notifyDrop  : function(ddSource, e, data){

   // Reference the record (single selection) for readability
   //var selectedRecord = ddSource.dragData.selections[0];


   // Load the record into the form
   //formPanel.getForm().loadRecord(selectedRecord);


   // Delete record from the grid.  not really required.
   //ddSource.grid.store.remove(selectedRecord);

   //return(true);
  }
 }); 
 Designer.target = formPanelDropTarget;

}

</script>

<div>   
 <div id="proxy_red" class="item" style="background:red">Red</div>
 <div id="proxy_green" class="item" style="background:green">Green</div>
 <div id="proxy_black" class="item" style="background:black">Black</div>
 <div id="proxy" class="item" style="color:Black">我可以<br/>随便拖</div>
</div>

<br/>
<div id="uxform" style="margin-left:200px;margin-top:120px"></div>
<br/>

<!--
<div id="target" class="block">把上面有颜色的色块拖到我这里试试</div>
<div id="target2" class="block">把上面有颜色的色块拖到我这里试试(此区域仅接受红色块)</div>
-->
</body>
</html>

stefshawn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Extjs3.1例子源代码
01-05
Extjs3.1例子源代码Extjs3.1例子源代码Extjs3.1例子源代码vv
(转)Extjs TreePanel 拖拽 ，节点为leaf=true 不能拖拽解决办法
在勇往直前的路上，记录些点滴
02-22 637
Ext.TreePanel有一个默认的控制，就是在允许拖放节点的时候，我们只能将节点拖放到 leaf = false 的节点下，而拖放节点到 leaf = true的节点的时候，界面上不出现节点被选定的状态。其结果是不管我们怎么拖动，都无法在一个叶子节点上做Append操作。        以下的代码是写在 nodedragover事件中的，当节点拖放时，我们对目标节点做一个判断，if (e.ta...
Extjs拖拽
常绍新的专栏
07-09 7766
最近项目前台使用Extjs实现，其中用到了Ext的Gridpanel的拖拽，现把相关内容总结，并写成一个例子。 本例子使用Extjs4.1的mvc模式实现。 第一步搭建程序架构 创建index.html文件，创建app.js文件，创建app/model、app/view、app/controller和app/store目录。 Index.html的很简单，内容如下： <!DOCTYP
extjs拖拽，请教高手
kang0533的博客
12-02 263
PageModelGridPanel = Ext.extend(Ext.grid.GridPanel, { title: 'Module对应的panel源数据', width: 550, autoScroll: true, columnWidth:.5,//表示列宽为一半 animate: true, containerScroll: true, enableDragD...
ExtJs学习笔记(24)-Drag/Drop拖动功能
菩提树下的杨过
09-18 1681
 直接给代码吧，主要重点已经在代码里注释了 CodeCode highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
Extjs Extjs4.2.1 例子
08-20
Extjs Extjs4.2.1 入门小例子 test1.jsp test2.jsp test3.jsp
Extjs4.1 小例子（适合extjs初学者学习使用）
09-19
标题中的"Extjs4.1 小例子"意味着这个压缩包包含了一些基础的示例代码，旨在帮助初学者快速入门。通过这些小例子，你可以了解如何使用ExtJS 4.1来创建用户界面，包括布局管理、组件系统、数据绑定、事件处理等核心...
extjs表单提交例子
07-28
保存提交代码，extjs4.0 // 重置 和 保存 按钮. buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '保存', /*formBind: true, //only enabled once the ...
EXTJS 3 例子
12-12
EXTJS3 的demo ，里面包含很多的标准例子，可作为开发的参考
强大的Extjs拖动示例
11-13
此功能实现手动配备大数据过滤sql条件，具有详细注释易懂，实现方式简单。可更具此基础上写成拖动表单。
Extjs3.x 为GridPanel 排序 行拖拽 行数据上移 行数据下移
dowhathowtodo
08-11 232
需要实现gridPanel行数据排序，思路是：删除选中行的数据，在移动行插入新数据，形成移动的假象。 var Menu = new Ext.menu.Menu({ items: [{ text: '上移', iconCls: 'arrow-upon-icon', handler: function(){ if(ro...
ExtJs中panel对象可拖动相关事件及代码
qq_41029075的博客
04-23 697
draggable: { insertProxy: false ,//设置不需要虚边框 //拖动事件 onDrag: function(e) { //获得移动之后的对象，代理对象 var pel = this.proxy.getEl(); this.x = pel.getLeft(true);//设置坐标 this.y = pel.getTop(t...
Ext JS中的拖动技术
stefshawn的专栏
04-17 1134
Ext JS中的拖动技术 拖动技术一般在Web程序中并不常用，这种技术往往被认为是非常复杂的。然而使用Ext JS技术后，一切就变得简单起来。在Ext JS中提供了两个类：Ext.dd.DD和Ext.dd.DDProxy。这两个类都可以实现拖动的效果。只是使用DD类拖动组件时，组件也会随着鼠标的移动而移动。而使用DDProxy类拖动组件时，在拖动的过程中会有一个灰色框（与被拖动组件同样大小）
Extjs 拖拽实例
xuanjiewu的专栏
02-09 271
Extjs 拖拽实例 body{ font-size:12px; margin:10px; } .item{ border:1px #000 solid; margin-right:10px; width:60px;...
ExtJS拖拽效果
dragonzoebai的专栏
12-08 1719
ExtJS拖拽效果
使用Ext实现拖拉功能
天天开心
08-19 282
[code] 　　Untitled Page 　　 　　 　　 　　　 　　　 　　　　body{font-size:12px;margin: 10px;}　　 　　　　 　　　　.block { 　　　　　　border: 1px red solid;　　　　　　　　　　 　　　　　　height:80px; 　　　　　　margin-top:50px; ...
培训课件 -从0到1搭建培训管理体系.pptx
最新发布
07-13
培训课件 -从0到1搭建培训管理体系.pptx
extjs 中文例子
08-05
ExtJS 是一个流行的 JavaScript 库，用于构建富交互式的 web 应用程序。它提供了丰富的组件和工具，可以帮助开发者快速构建功能强大、美观的用户界面。 以下是一个简单的 ExtJS 中文示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>ExtJS 中文示例</title> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/extjs-ext-all@7.3.1/classic/theme-triton/resources/theme-triton-all.css"> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/extjs-ext-all@7.3.1/build/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() { // 创建一个简单的窗口 var window = Ext.create('Ext.window.Window', { title: '欢迎使用 ExtJS', width: 400, height: 300, layout: 'fit', items: [{ xtype: 'panel', html: '<h1>你好，世界！</h1>' }] }); window.show(); }); </script> </body> </html> ``` 在这个例子中，我们首先引入了 ExtJS 的样式和 JavaScript 文件。然后，使用 `Ext.onReady` 方法在页面加载完成后执行代码。 在代码中，我们创建了一个简单的窗口并设置了标题、宽度和高度等属性。窗口中包含一个面板，面板中显示了一个带有标题的简单文本。 当页面加载完成后，我们调用 `window.show()` 方法将窗口显示在页面上。 这个示例演示了如何使用 ExtJS 创建一个简单的中文窗口，并在其中显示一些文本内容。通过使用 ExtJS 的丰富组件和工具，我们可以轻松地构建出功能强大、美观的 web 应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值