Droppable(放置)組件也是一個基本組件，用法較簡單，語法都在例子裏面註釋了：
示例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script>
$(function () {
$.fn.droppable.defaults.disabled = true;//重寫默認值爲true
$('#dd').droppable({
accept : '#box,#ipt',//設置哪些元素可以被接受
disabled : false, //不單獨設置默認值時默認爲false,當設置爲true的時候則禁止放置。
/*
onDragEnter只觸發一次，而Over會在不停的拖動中不停觸發, onDragEnter觸發的事件在移動過程中一瞬即逝,所以要想看清楚最好是看瀏覽器控制檯,或者加個alert中斷一下。
onDrop是放入到放置區，鬆開鼠標左鍵，丟下的操作。
*/
onDragEnter : function (e, source) {
console.log('曇花一現');
$(this).css('background', 'blue');
//alert('enter');
},
onDragOver : function (e, source) {
console.log(source);
$(this).css('background', 'orange');
//alert('over');
},
onDragLeave : function (e, source) {
console.log(source);
$(this).css('background', 'green');
//alert('over');
},
onDrop : function (e, source) {
console.log(source);
$(this).css('background', 'maroon');
//alert('over');
}
});
$('#dd').droppable('disable');//禁止
$('#dd').droppable('enable'); //允許
$('#box').draggable({
accept : '#ipt',//設置哪些元素可以被接受
disabled : false //不單獨設置默認值時默認爲false,當設置爲true的時候則禁止放置。
});
$('#ipt').draggable({
});
});
</script>
</head>
<body>
<div id="dd" class="easyui-droppable"
data-options="accept:'#box,#pox,#ipt'" style="width:600px;height:400px;background:#66ffff">
</div>
<div id="box" style="width:100px;height:100px;background:#ccc;">
<span id="pox">內容部分</span>
</div>
<div id="ipt" style="width:50px;height:50px;background:#ccc;">
內容IPT
</div>
</body>
</html>