[学习交流] 分享JQuery EasyUI的学习笔记: 可放置组件-droppable

继续前一章的可拖动组件，和Java的关系不大。可以和JavaWeb配合使用，做网站的管理后天比较不错，希望对大家有用。

属性
accept: null/selector 确定哪些元素被接受
disabled：false/boolean 如果为true，则禁止放置

事件
onDragEnter 参数：e,source 在被拖拽的元素进入放置区内的时候触发
onDragOver  参数：e,source 在被拖拽的元素经过放置区的时候触发
onDragLeave 参数：e,source 在被拖拽的元素离开放置区内的时候触发
onDrop    参数：e,source 在被拖拽的元素放到到放置区内的时候触发

方法
options 参数：none 返回对象的属性
enable  参数：none 启用放置功能
disable 参数：none 禁用放置功能

修改默认值：
$.fn.droppable.defaults.disabled = true;

示例代码：

<!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 type="text/javascript">
$(function (){
$('#box').draggable({
revert:false,
cursor:null,
handle:null,
disabled:false,
edge:0,
axis:null,
onBeforeDrag:function (e){
// alert('beforeDrag');
},
onStartDrag:function (e){
// console.log(e);
},
onDrag:function (e){
// console.log(e);
},
onStopDrag:function (e){
// alert('stop');
}
});
// $('#box').draggable('disable')
// console.log( $('#box').draggable('options') );
$('#container').droppable({
accept:'#box',
onDragEnter:function (e, source){
$(this).css('background','green');
},
onDragLeave:function (e,source){
console.log(source);
},
onDrop:function (e, source){
// alert('onDrop');
$(source).appendTo($(this));
$(source).css('top','0px').css('left','0px').css('position','relative');
}
});
});
</script>
</head>
<body>
<div id="container" style="width:300px;height:300px;border:1px solid #ccc">
</div>
<div id="box" style="width:100px;height:100px;background:red">
<span id="draggableText">文本内容</span>
</div>
</body>
</html>

复制代码

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 分享JQuery EasyUI的学习笔记: 可放置组件-droppable

0 个回复