下面我們通過拖放來熟悉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表示原始複製
});
最後實現的效果爲自定義拖動效果，即效果和使用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>