ExtJs学习笔记(24)-Drag/Drop拖动功能
时间:2022-04-23
本文章向大家介绍ExtJs学习笔记(24)-Drag/Drop拖动功能,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
直接给代码吧,主要重点已经在代码里注释了
Code
<!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>
<title>Untitled Page</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 {
border: 1px red solid;
height:80px;
margin-top:50px;
padding:20px 0 0 20px;
clear:both;
}
.item {
border: 1px #000 solid;
margin-right:10px;
width: 60px;
height: 40px;
text-align:center;
padding-top:20px;
color:White;
float:left;
cursor:pointer;
}
</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());
var sColor = srcEl.dom.id.split('_')[1]; //得取拖动源id的后面一部分,即proxy_red后面的red
destEl.dom.style.backgroundColor = sColor; //设置目标id的背景色
};
proxy_green.afterDragDrop = proxy_red.afterDragDrop; //为其它拖动源赋值同样的事件处理函数
proxy_black.afterDragDrop = proxy_red.afterDragDrop;
var target = new Ext.dd.DDTarget('target', 'dd'); //建立拖动目标区(这里的dd与上面拖动源的group:dd相同
//只有相同group的DDProxy/DragSource才会接受)
});
</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>
<div id="target" class="block">把上面有颜色的色块拖到我这里试试</div>
</body>
</html>
看下效果图:
1.拖动Green块(但还未到达目标区)时的效果:
2.拖动Green块(到达目标区)时的效果 3.拖动完成后的效果
4."我可以随便拖"的拖动效果
5."我可以随便拖"拖动完成后的效果
转载请注明来自菩提树下的杨过
简单说明几点:
1.ExtJs中的拖动功能,只要记住DDProxy是用来拖动的组件,而DDTarget就是用来放拖动块的容器就可以了,其它东西比如DragZone,DragSource都是继承自DDProxy,同样基本功能也就是拖动块
2.DDProxy其它的常用事件,可以参考官方的API文档
再来改进一下:
Code
<!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>
<title>Untitled Page</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:80px;
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";
};
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');
});
</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="target" class="block">把上面有颜色的色块拖到我这里试试</div>
<div id="target2" class="block">把上面有颜色的色块拖到我这里试试(此区域仅接受红色块)</div>
</body>
</html>
这一次我们建立了二个目标容器
并且第二个容器仅接受红色的色块
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- php实现大文件断点续传下载实例代码
- Laravel第三方包报class not found的解决方法
- 使用laravel的migrate创建数据表的方法
- 解决laravel session失效的问题
- php7下的filesize函数
- PHP-FPM 设置多pool及配置文件重写操作示例
- laravel实现登录时监听事件,添加登录用户的记录方法
- php更新cookie内容的详细方法
- php实现映射操作实例详解
- Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
- yii框架数据库关联查询操作示例
- laravel-admin的多级联动方法
- Laravel数据库读写分离配置的方法
- php给数组赋值的实例方法
- php实现分页功能的详细实例方法