开发者社区> 杨俊明> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

ExtJs学习笔记(24)-Drag/Drop拖动功能

简介: 直接给代码吧,主要重点已经在代码里注释了   CodeDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
+关注继续查看

直接给代码吧,主要重点已经在代码里注释了

 

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."我可以随便拖"拖动完成后的效果

 转载请注明来自菩提树下的杨过http://www.cnblogs.com/yjmyzz/archive/2008/09/17/1292728.html

 

简单说明几点:

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>

 

 

这一次我们建立了二个目标容器



并且第二个容器仅接受红色的色块


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
利用COM组件IPicture读取jpg、gif、bmp图片文件数据和显示图片
1.读取图片数据 函数原型:bool LoadImage(const char *pName, unsigned char *pBitData); 函数功能,读取pName指向的图片文件的位图数据 bool LoadImage(const char *pName, unsigned char ...
887 0
asp.net 在C盘创建 log.txt出错
  在服务器上,C盘一般是不允许通过WEB创建文档的,除非你在权限设置中打开,改为其他盘即可。       public static void LOG(string msg = "")        {            try            {                string path = "c:\\log.
700 0
预览ExtJS 4.0的新功能/新特性(一):渲染组件的方式
转载请注明出处Ext中文网(http://www.ajaxjs.com)。 ExtJS 3.3的下一个版本就是4.0。——什么!?您不知道?那就让我们为你展开新一段的 Ext 之旅吧! 一、渲染组件的方式 话说 ExtJS Roadmap(新版本线路图)其中重要的一项就是“Rearchitected component rendering system - smaller, faster and simpler than ever before”,重新编制组件的渲染架构,目标是比以前更快、更精、更容易!。
914 0
asp.net mvc实战-学习笔记(1)
写这玩意主要是为了锻炼一下英文水平 第一篇翻译的比较详细 一个是看看这个书翻译容易不容易 第二个是看看自己有没有这个水平 接下来的翻译可能就只检重点的翻译了   Asp.net mvc 实战Jeffrey PalermoBen ScheirmanJimmy Bogard   Asp.
973 0
Ext JS 学习笔记
对于scope使用的几个小技巧: Four Tips for Staying on Track With Scope in ExtJS 如何在ExtJS(Javascript)里面拷贝(克隆)一个Object 对于ExtJS可以使用这段代码:   /** * Clone Function *...
774 0
ExtJs学习笔记(13)_Card布局
这个布局其实最为麻烦,主要是用来实现类似"上一步","下一步"类似向导的界面 代码如下: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
794 0
+关注
杨俊明
菩提树下的杨过 http://yjmyzz.cnblogs.com/
1102
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载