怎麼說呢Droppable這個單詞到底是什麼意思,準確來說easyui作者到底要表達什麼意思，還是不大好拿捏的。不過沒關係,沒有必要糾結與這些細枝末節的東西,根據官網的demo效果,就簡單的將之定義爲(可投擲)吧!
Droppable
droppable和draggable有類似的地方,不過區別點在於前者着重於將元素放進某個容器中,而後者則着重於可拖拽(雖然可能一些效果兩者都可以實現)。而且通過查看easyloader源碼可知道，droppable並不依賴於draggable。
Droppable覆蓋默認值$.fn.droppable。
下面根據官網doc,看看其所具有的屬性、事件、方法吧。
屬性
droppable具有的屬性不多,到目前的easyui版本只有兩個如下表:
| 名稱 | 類型 | 描述信息 | 默認值 |
| accept | selector | 決定哪些課拖拽的元素能被接受 | null |
| disable | boolean | 如果爲true則停止投擲 | false |
事件
| 名稱 | 參數 | 描述信息 |
| onDragEnter | e,source | 當拖拽元素被拖入的時候觸發.source參數指明拖拽的DOM元素 |
| onDragOver | e,source | 當拖拽元素被拖出(成功放入某個容器)的時候觸發(且在onDrop之前觸發).source參數指明拖拽的DOM元素 |
| onDragLeave | e,source | 當拖拽元素被拖離的時候觸發.source參數指明拖拽的DOM元素 |
| onDrop | e,source | 當拖拽元素被放下的時候觸發.source參數指明拖拽的DOM元素 |
方法
| 名稱 | 參數 | 描述信息 |
| options | none | 返回options對象 |
| enable | none | 可投擲 |
| disable | none | 不可投擲 |
使用方式
和Draggable一樣,Droppable同樣有兩種創建方式。
1、通過html標記創建:
<div class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;background:gray;">
</div>2、通過js腳本創建:
<div class="easyui-droppable" id="dd" style="width:100px;height:100px;background:gray;">
</div>
<script>
$('#dd').droppable({
accept: '#d1,#d3'
});
</script>Demo
easyui官方提供了關於Droppable的demo,地址這裏就不給出了。直接看看官方給出一個例子吧:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Accept a Drop - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">
<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
</head>
<body>
<div style="margin:20px 0;"></div>
<div id="source" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
drag me!
<div id="d1" class="drag">Drag 1</div>
<div id="d2" class="drag">Drag 2</div>
<div id="d3" class="drag">Drag 3</div>
</div>
<div id="target" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
drop here!
</div>
<div style="clear:both"></div>
<style type="text/css">
.drag{
width:100px;
height:50px;
padding:10px;
margin:5px;
border:1px solid #ccc;
background:#AACCFF;
}
.dp{
opacity:0.5;
filter:alpha(opacity=50);
}
.over{
background:#FBEC88;
}
</style>
<script>
/**
使用js方式將元素設置爲可draggable的
*/
$(function(){
$('.drag').draggable({
proxy:'clone',
revert:true,
cursor:'pointer',
onStartDrag:function(){
$(this).draggable('options').cursor='not-allowed';//設置鼠標樣式爲不可拖動
$(this).draggable('proxy').addClass('dp');//設置樣式
},
onStopDrag:function(){
$(this).draggable('options').cursor='auto';//設置鼠標
}
});
//將容易置爲droppable並且可接受元素
$('#target').droppable({
accept:'#d1,#d3',
onDragEnter:function(e,source){//拖入
$(source).draggable('options').cursor='auto';
$(source).draggable('proxy').css('border','1px solid red');
$(this).addClass('over');
},
onDragLeave:function(e,source){//脫離
$(source).draggable('options').cursor='not-allowed';
$(source).draggable('proxy').css('border','1px solid #ccc');
$(this).removeClass('over');
},
onDrop:function(e,source){//放下
$(this).append(source)
$(this).removeClass('over');
alert("我被放下了");
} ,
//onDropOver當元素被拖出(成功放入到某個容器)的時候觸發
onDragOver:function(e,source){
alert("我被拖出去了");//先於alert("我被放下了");執行,表明其觸發在onDrop之前。
}
});
});
</script>
</body>
</html>運行效果圖這裏就不給出了,官網直接就可以查看。OVER!
效果地址:http://www.jeasyui.com/demo/main/index.php?plugin=Droppable&theme=default&dir=ltr&pitem=
獨立站點:點擊打開鏈接