Extjs 拖拽范例
日期：2014-05-16 浏览次数：20326 次
Extjs 拖拽实例
<%@ 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
<%@ 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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
