<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>拖拽实验</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:160px;
padding:20px 0 0 20px;
}
.item {
border: 1px #000 solid;
margin-right:10px;
width: 50px;
height: 20px;
text-align:center;
padding-top:10px;
float:left;
cursor:pointer;
font-size:12px;
color:Black
}
.BorderOver{
border:dashed 2px #00f;
}
.red{
background:red;
}
.black{
background:black;
}
.green{
background:green;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var proxy_label = new Ext.dd.DragSource('proxy_label', {group:'dd'});
var proxy_textfield = new Ext.dd.DragSource('proxy_textfield', {group:'dd'});
var proxy_combo = new Ext.dd.DragSource('proxy_combo', {group:'dd'});
var proxy_textarea = new Ext.dd.DragSource('proxy_textarea', {group:'dd'});
//拖动完成的事件
proxy_label.afterDragDrop = function(target, e, id) {
var destEl = Ext.get(id);
var srcEl = Ext.get(this.getEl());
var uitype = srcEl.dom.id.split('_')[1];
var beginX = destEl.getX(); //目标区块的X轴初始坐标
var beginY = destEl.getY(); //目标区块的Y轴初始坐标
var eXY = e.getXY();
var dragtargetX = eXY[0];
var dragtargetY = eXY[1];
var X = dragtargetX - beginX;
var Y = dragtargetY - beginY;
//alert("X:"+X+" "+"Y:"+Y);
var uiobj = Designer.createui(uitype,X,Y,{});//创建UI元素
//alert(uiobj.getXType());
Designer.formPanel.add(uiobj);
Designer.formPanel.doLayout();
}
proxy_textfield.afterDragDrop = proxy_label.afterDragDrop;
proxy_combo.afterDragDrop = proxy_label.afterDragDrop;
proxy_textarea.afterDragDrop = proxy_label.afterDragDrop;
var target = new Ext.dd.DDTarget('target', 'dd');
//建立拖动目标区(这里的dd与上面拖动源的group:dd相同
//只有相同group的DDProxy/DragSource才会接受)
var target2 = new Ext.dd.DDTarget('target2', 'dd');
Designer.uxForm();
//右侧属性表格
//var right_prop = Designer.propsGrid();
//right_prop.show();
});
</script>
<script language="javascript">
Ext.namespace('Designer');
Ext.maxuiid = 1000;
Designer.createui = function(uitype,X,Y,object){
var obj = {x:X,y:Y,id:(uitype+Ext.maxuiid)};
Ext.maxuiid += 1;
if(uitype=="label"){
obj.text = "静态文本:";
obj.style = "font-size:14px;";
var uiobj = new Ext.form.uxLabel(obj);
}else if(uitype=="textfield"){
obj.readOnly=true;
var uiobj = new Ext.form.TextField(obj);
}else if(uitype=="combo"){
var store = new Ext.data.SimpleStore({//定义组合框中显示的数据源
fields: [ {name: 'displayField',mapping:'label'},
{name: 'valueField',mapping:'value'}],
data :[]
});
obj.store = store; obj.readOnly=true;
var uiobj = new Ext.form.ComboBox(obj);
}else if(uitype=="textarea"){
obj.readOnly=true;
var uiobj = new Ext.form.TextArea(obj);
}else {
alert("未定义的界面元素类型");
}
if(uitype=='label'){
uiobj.on("click",function(){
//改变文本背景颜色
var el = uiobj.getEl();
//el.dom.style.backgroundColor = "red";
var formid = uiobj.getEl().findParent('form').id;
//
var pos = gettargetXY(el,formid,this.getEl());
if(obj.clicked!=true){
right_prop = Designer.propsGrid();
right_prop.show();
}
right_prop.setSource({
'名称': '静态文本',
"宽度": 20,
"横坐标":pos.x,
"纵坐标":pos.y
});
//增加状态控制,防止创建多个属性表格
obj.clicked = true;
//
//创建一个拖拽对象
var target = new Ext.dd.DDProxy(uiobj.id, 'dd');
//拖拽函数处理
target.onDragDrop = function(e,id){
var newpos = gettargetXY(e,id,this.getEl());
//alert("X:"+newpos.x+" Y:"+newpos.y);
if(obj.clicked!=true){
right_prop = Designer.propsGrid();
right_prop.show();
}
right_prop.setSource({
'名称': '静态文本',
"宽度": 20,
"横坐标":newpos.x,
"纵坐标":newpos.y
});
//增加状态控制,防止创建多个属性表格
obj.clicked = true;
}
});
}else if(uitype=='textfield'||uitype=='textarea'){
uiobj.on("focus",function(){
var target = new Ext.dd.DDProxy(uiobj.id, 'dd');
target.onDragDrop = function(e,id){
var newpos = gettargetXY(e,id,this.getEl());
//alert("X:"+newpos.x+" Y:"+newpos.y);
//uiobj.selectText();
}
});
}else{
alert("其它");
}
return uiobj;
}
Designer.uxForm = function (){
var formPanel = new Ext.form.FormPanel({
id:'formpanelid',
header:false,
//frame:true,
border:true,
layout:"absolute",
width :600,
height :400,
renderTo:"uxform"
});
Designer.formPanel = formPanel;
var formPanelDropTargetEl = formPanel.body.dom;
var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
id:'targetid',
group : 'dd',
notifyEnter : function(ddSource, e, data) {
},
notifyDrop : function(ddSource, e, data){
}
});
Designer.target = formPanelDropTarget;
}
function gettargetXY(e,id,el){
var destEl = Ext.get(id);
var srcEl = el;
var beginX = destEl.getX(); //目标区块的X轴初始坐标
var beginY = destEl.getY(); //目标区块的Y轴初始坐标
var eXY = e.getXY();
var dragtargetX = eXY[0];
var dragtargetY = eXY[1];
var X = dragtargetX - beginX;
var Y = dragtargetY - beginY;
return {x:X,y:Y};
}
Ext.form.uxLabel = Ext.extend(Ext.form.Label, {
})
Ext.form.uxLabel.prototype.afterRender = Ext.form.uxLabel.prototype.afterRender.createSequence(
function() { this.relayEvents(this.el, ['click']); }
);
Designer.propsGrid = function(){
return new Ext.grid.PropertyGrid({
renderTo: 'prop-grid',
width: 300,
hidden:true,
autoHeight: true,
source: {
'(name)': 'Properties Grid',
grouping: false,
autoFitColumns: true,
productionQuality: false,
created: new Date(Date.parse('10/15/2006')),
tested: false,
version: 0.01,
borderWidth: 1
},
viewConfig : {
forceFit: true,
scrollOffset: 2 // the grid will never have scrollbars
}
});
}
///
</script>
<div style="margin-left:300px;margin-top:60px;">
<div id="proxy_label" class="item" >静态文本</div>
<div id="proxy_textfield" class="item" >文本框</div>
<div id="proxy_combo" class="item">下拉框</div>
<div id="proxy_textarea" class="item">多行文本</div>
</div>
<br/>
<div>
<div id="uxform" style="margin-left:200px;margin-top:40px;float:left;width:auto;"></div>
<div id="prop-grid" style="margin-top:40px;float:left;width:auto;"></div>
</div>
<br/>
<!--
<div id="target" class="block">把上面有颜色的色块拖到我这里试试</div>
<div id="target2" class="block">把上面有颜色的色块拖到我这里试试(此区域仅接受红色块)</div>
-->
</body>
</html>