Loading

easyUI droppable组件使用

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'); // 有效果呀；
});

 

posted @ 2015-10-07 08:52  stono  阅读(511)  评论(0)  编辑  收藏  举报