easyui Droppable组件实现放置特效
所谓放置，就是将一个物体放入一个物体内，当然对于easyui来说触发各种效果是必不可少的，同时这个组件也不会依赖于其他组件。
Droppable的加载方式
1,class 加载 一直不太喜欢class方式的加载 浪费一个位置，代码一多还看着乱七八糟的。
<divid='dd'class="easyui-droppable"data-options="accept:'#box,#pox'"></div>
2,js加载调用
$("#box").droppable({
accept:'#pox',//将元素pox放置在元素box中
});
Droppable的属性
1,accept默认为null,确定哪些元素被接受，也就是那个元素能被放置
$("#box").droppable({
accept:'#pox',//将元素pox放置在元素box中
});
2，deisabled默认为false 如果为true，则禁止放置
$("#box").droppable({
accept:'#pox',//将元素pox放置在元素box中
disabled:true,//禁止放置
});
Droppable事件列表
1,onDragEnter 在被拖拽元素到放置区域内的时候触发
2,onDragOver在被拖拽元素经过放置区域的时候触发
3,onDragLeave 在被拖拽元素离开放置区域的时候触发
4,onDrop 在被拖拽元素放入到放置区的时候触发
onDragEnter/onDragOver/onDragLeave/onDrop:function(e,source){
//source参数获取DOM元素
}
Droppable方法列表
1，options返回属性对象
console.log($('#box').droppable('options'));
2,enable,disable和上面属性的功能是一样的 分别是启用和禁止放置
$('#box').droppable('enable/disable')
给大家展示下官方的示例吧
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>AcceptaDrop-jQueryEasyUIDemo</title>
<linkrel="stylesheet"type="text/css"href="jquery-easyui-1.3.6/themes/metro/easyui.css">
<linkrel="stylesheet"type="text/css"href="jquery-easyui-1.3.6/themes/icon.css">
<linkrel="stylesheet"type="text/css"href="jquery-easyui-1.3.6/demo/demo.css">
<scripttype="text/javascript"src="jquery-easyui-1.3.6/jquery.min.js"></script>
<scripttype="text/javascript"src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
</head>
<body>
<divstyle="margin:20px0;"></div>
<divid="source"style="border:1pxsolid#ccc;width:300px;height:400px;float:left;margin:5px;">
dragme!
<divid="d1"class="drag">Drag1</div>
<divid="d2"class="drag">Drag2</div>
<divid="d3"class="drag">Drag3</div>
</div>
<divid="target"style="border:1pxsolid#ccc;width:300px;height:400px;float:left;margin:5px;">
drophere!
</div>
<divstyle="clear:both"></div>
<styletype="text/css">
.drag{
width:100px;
height:50px;
padding:10px;
margin:5px;
border:1pxsolid#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','1pxsolidred');
$(this).addClass('over');
},
onDragLeave:function(e,source){//脱离
$(source).draggable('options').cursor='not-allowed';
$(source).draggable('proxy').css('border','1pxsolid#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=
easyui1.3.5Droppable就此完结。