ExtJS拖放技术DragSource拖动到指定区域DDTarget
本文由发表于7年前 | ExtJS | 评论数 1 |  被围观 10,584 views+

ExtJS中的拖放组件是从Ext.dd.DragDrop继承而来的,包括放置区域的组件Ext.dd.DDTarget,Ext.dd.DropZone,拖动块组件Ext.dd.DD,Ext.dd.DDPRoxy,Ext.dd.DragSource。下面示例把Ext.dd.DragSource拖放到指定的区域Ext.dd.DDTarget中:

ExtJS拖放技术
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>ExtJS拖放技术</title>
<link rel="stylesheet" type="text/css"
	href="../script/resources/css/ext-all.css" />
<script type="text/javascript" src="../script/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../script/ext-all.js"></script>
       <style type="text/css">
.proxy {
    background: #5eb0fd;
    width: 100px;
    height: 100px;
    border:1px #fda95e solid;
    text-align: center;
    padding:10px;
    font-size:12px;
}
.target {
	width:200px;
	height:200px;
	background-color: #ea9d6a;
	padding:10px;
	font-size:12px;
}
</style>
<script type="text/javascript">



Ext.onReady(function(){
	  var proxy = new Ext.dd.DragSource('div-proxy', {group:'dd'});
	    proxy.afterDragDrop = function(target, e, id) {
	       alert('已接收proxy');
	    };
 	    var target = new Ext.dd.DDTarget('div-target', 'dd');
});

</script>
</head>
<body>
<br>
<div id="div-proxy" class="proxy">

这是一个拖动块,另外,也可以使用Ext.dd.DD,Ext.dd.DDProxy,Ext.dd.DragZone创建拖动块

</div>
<hr />
<div id="div-target" class="target">
这里是放置区域Ext.dd.DDTarget,另外也可以使用Ext.dd.DropZone创建放置区域
</div>

</body>

</html>

运行效果如图所示:

DragSource拖放到指定区域DDTarget

DragSource拖放到指定区域DDTarget

除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/extjs-drag-drag-and-drop-technology-to-the-designated-area-ddtarget-dragsource.html
关键字: ,
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 4/13
文章评论
    一条评论
  1. 小媒体 2014年12月29日18:31:27  #-49楼 回复 回复

    怎么禁用拖动?

给我留言

有人回复时邮件通知我
ExtJS的相关文章
随机文章 本月热门 热评
1 Struts2 Hibernate Spring 整合的基本流程和步骤及其相关配置细节 2011/7/23
2 总体设计-模块化 层次图 结构图 2011/7/1
3 Java笔记 – 数组 一维数组 多维数组 数组与泛型 数组实用功能 2014/3/14
4 JSF笔记 – MVC和JSF的介绍和下载使用 2011/12/1
5 Java Web笔记 – Servlet中的Filter过滤器的介绍和使用 编写过滤器 2011/11/12
6 The Main Function of Activity and its Basic Usage 2011/7/12
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.