2 拖放效果
下面我们通过拖放来熟悉EasyU。这个教程显示如何使HTML元素变得可拖放。这个例子会创建3个DIV元素然后让它们变得可拖放。
首先在EasyUIDemo目录下建立一个文件夹myDemo。使用Dreamware新建一个html文档，命名为dragTest.html。
在head标签之间插入三条语句，如代码清单2-1所示。
代码清单2-1 dragTest.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.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="../themes/default/easyui.css" /> <script type="text/javascript" src="../jquery-1.8.0.min.js"></script> <script type="text/javascript" src="../jquery.easyui.min.js"></script> </head> <body> </body> </html>
注意：所有需要EasyUI文件都在EasyUIDemo文件夹中，我们只将需要的文件导入到html文档中。
在EasyUI中具有多种拖动效果与实现方法，下面我们逐一介绍。
2.1 使用class属性设置拖动效果
在body标签中创建两个div，如下：
<div id="dd1" class="">拖放测试1</div> <div id="dd2" class="easyui-draggable">拖放测试2</div>
设置div外观，在head中插入：
<style type="text/css">
div{
width:100px;
height:100px;
background-color:#CCC;
}
</style>
注意，在div中将第二个class属性设置为easyui-draggable。刷新网页，第一个拖放测试不能拖动，第二个却可以拖动。
2.2 使用JS实现拖动效果
也可以使用js代码来实现div的拖动效果，在head标签中加入：<script type="text/javascript">
$(function(){
$('#dd1').draggable();//使id为dd1的标签具有拖动效果
});
</script>
测试运行，可见两个div标签都具有了拖动功能。
上面两例的拖动效果比较简单，EasyUI实现了多种不同的拖动效果，如官方Demo：
http://www.jeasyui.com/tutorial/dd/dnd1_demo.html
下面我们实现拖动div时，原有位置和拖动位置都有div，当松开鼠标左键是，原有的div消失。
在body中增加一个div：
<div id="dd3" class="">拖放测试3</div>
在$(function(){和 });之间插入：
$('#dd2').draggable({
proxy:'clone' //使id为dd2的div标签使用proxy拖放效果，其中clone表示原始复制
});
让第三个DIV元素使用proxy来拖放，proxy:'clone'表示proxy使用原始元素的复制。
最后实现的效果为自定义拖动效果，即效果和使用proxy:'clone'类似，知识拖动的div效果可以自定义。
新增加一个div：
<div id="dd4" class="">拖放测试4</div>
插入js代码：
$('#dd4').draggable({
proxy:function(source){//自定义拖动效果
var p = $('<div>proxy</div>'); //新建一个div标签
//将新建的div标签加到body标签中（当拖动dd4时，新建的div显示）
p.appendTo('body');
return p; //proxy的拖动效果为新增的div标签p
}
});
附：dragTest.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.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="../themes/default/easyui.css" />
<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:#CCC;
}
</style>
<script type="text/javascript">
$(function(){
$('#dd1').draggable();//使id为dd1的标签具有拖动效果
$('#dd3').draggable({
//使id为dd2的div标签使用proxy拖放效果，其中clone表示原始复制
proxy:'clone'
});
$('#dd4').draggable({
proxy:function(source){//自定义拖动效果
var p = $('<div>proxy</div>'); //新建一个div标签
//将新建的div标签加到body标签中（当拖动dd4时，新建的div显示）
p.appendTo('body');
return p; //proxy的拖动效果为新增的div标签p
}
});
});
</script>
</head>
<body>
<div id="dd1" class="">拖放测试1</div>
<div id="dd2" class="easyui-draggable">拖放测试2</div>
<div id="dd3" class="">拖放测试3</div>
<div id="dd4" class="">拖放测试4</div>
</body>
</html>