使用Draggable元素需要拖动到指定的元素,那这儿需要使用到Droppable可放置插件
Droppable可放置有2种实现方式:
第一种 通过标记实现Droppable可放置区域
1
2
3
4
|
< div class = "easyui-droppable" data-options = "accept:'#d1,#d2'" style = "width:100px;height:100px;" ></ div >
< div id = "d1" ></ div >
< div id = "d2" ></ div >
< div id = "d3" ></ div >
|
class="easyui-droppable" 指定可放置区域 data-options="accept:'#d1,#d2'" 能被放置的模块:d1和d2可以 d3不能放到这个区域
第二种 通过javascript实现Droppable可放置区域
先定义一个div
1
|
< div id = "dd" style = "width:100px;height:100px;" ></ div >
|
在使用javascript创建
1
2
3
4
|
$('#dd').droppable({
accept:'#d1,#d2',
disabled:true//设置为true 停止可拖放
});
|
accept 确定将被接受的可拖动元素
事件:
Name |
Parameters |
Description |
onDragEnter |
e,source |
可拖动元素被拖进来触发 |
onDragOver |
e,source |
可拖动元素被拖过时触发 |
onDragLeave |
e,source |
可拖动元素被拖离开时触发 |
onDrop |
e,source |
可拖动元素被拖放下触发
|
本文转自 l363130002 51CTO博客,原文链接:http://blog.51cto.com/liuyj/1590862