easyUI droppable组件使用

时间:2023-11-26 09:53:20

easyUI droppable组件使用:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="easyui/jquery.min.js"></script>
<script src="easyui/jquery.easyui.min.js"></script>
<script src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="js/test004.js"></script>
<link rel="stylesheet" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" href="easyui/themes/icon.css">
</head> <body>
<div id="pox" class="easyui-droppable" data-options="accept:'#box',onDragEnter:function(e,s){console.log('onDrapEnter');}" style="border:1px solid red;width:300px;height:300px">this is container</div>
<div id="box" class="easyui-draggable" style="border:1px solid black;width:100px">this is children</div>
<div id="pox2" style="border:1px solid black;width:300px;height:300px">this is container2</div>
</body> </html>
$(function(argument) {
var obj = {
accept: '#box', //接收哪些对象,可以是.className之类的选择器
//disabled:true,//禁止放置,但是还是能放上去的,但是事件都不响应了;
onDragEnter: function(e) { //e类型_dragener
console.log('onDragEnter');
console.log(e);
},
onDragOver: function(e) { //e类型_dragover
// console.log('onDragOver');
// console.log(e);
console.log($(this).droppable('options')); //获取options对象;
},
onDragLeave: function(e) { //e类型_dragleave
console.log('onDragLeave');
console.log(e);
},
onDrop: function(e) { //e类型_drop
console.log('onDrop');
console.log(e);
}
};
$('#pox2').droppable(obj);
$('#pox2').droppable('disable'); // 有效果呀;
$('#pox').droppable('disable'); // 有效果呀;
});