Extjs拖拽示例-优快云博客

本文链接：https://blog.youkuaiyun.com/xuanjiewu/article/details/83837421

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<title>Extjs 拖拽实例</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/test/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/test/extjs/ext-all.js"></script>
<script type="text/javascript" src="/test/extjs/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="/test/extjs/resources/css/ext-all.css">
<style type="text/css">
body{
font-size:12px; margin:10px;
}
.item{
border:1px #000 solid;
margin-right:10px;
width:60px;
height:140px;
text-align:center;
padding-top:10px;
color:white;
float:left;
cursor:pointer;
}
.block{
border:1px red solid;
height:380px;
margin-top:50px;
padding:20px 0 0 20px;
clear:both;
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
var proxy = new Ext.dd.DDProxy("proxy");
var proxy_red = new Ext.dd.DragSource('proxy_red',{group:'dd'});
var proxy_green = new Ext.dd.DragSource('proxy_green',{group:'dd'});
var proxy_yellow = new Ext.dd.DragSource('proxy_yellow',{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];
destEl.dom.style.backgroundColor = sColor;
};
proxy_green.afterDragDrop = proxy_red.afterDragDrop;
proxy_yellow.afterDragDrop = proxy_red.afterDragDrop;

//建立拖动目标区
var target = new Ext.dd.DDTarget('target','dd');

});
</script>
</head>
<body>
<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_yellow" class="item" style="background:yellow">Yellow</div>
<div id="proxy" class="item" style="background:pink;">我可以随便拖</div>
</div>
<div id="target" class="block">把上面有颜色的色块拖到我这里试试</div>

</body>
</html>

本文转自 http://hi.baidu.com/hanlicun/blog/item/7d429c13f51bae2fdc540134.html