使用Ext实现拖拉功能

kidiaoer

浏览: 822178 次
性别:
来自: 深圳

最近访客更多访客>>

nandyweb

lehmann_ding

dniahf

wxn_yxm

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

extjs

EXT XHTML HTML


<!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="../ext/eresources/css/ext-all.css" />
　　<script type="text/javascript" src="../ext//adapter/ext/ext-base.js"></script>
　　<script type="text/javascript" src="../ext//ext-all-debug.js"></script>
　　<script type="text/javascript" src="../ext/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>

分享到：

在extjs中，用GridPanel来显示数据 | 深入浅出Ext JS：一个完整的EXT应用

2010-08-19 14:24
浏览 1420
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

使用Ext实现拖拉功能

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

使用Ext实现拖拉功能

评论

发表评论

相关推荐

Ext 文档相关

Ext3.2中文API(最终完成版2010-10-25)

Ext.data.Connection

EXt tree 简单增、删、改、查

Extjs总结

在Struts2.0中使用JSON结合DWR和EXT

搭建EXTJS和STRUTS2框架(ext和struts2简单实例)

EditorGridPanel中ComboBox显示问题?

ExtJS3.0之可编辑表格EditorGridPanel

div左图右文布局效果 收藏

Ext Js Grid 编辑 新增 删除 保存的一个小示例

xt中combobox在grid显示问题

Ext.grid.EditorGridPanel的使用、修改记录的获取及提交方法

在Ext中EditorGrid中datefield输入问题解决过程

在extjs中，用GridPanel来显示数据

深入浅出Ext JS：一个完整的EXT应用

Ext.GridPanel 用法总结（一）—— Grid基本用法

Ext.ux.grid.RowEditor的使用

ext+dwr完整的例子(包括树,增删改查等)

DWR与EXT整合

最近访客更多访客>>

div左图右文布局效果收藏

Ext Js Grid 编辑新增删除保存的一个小示例