首页 > 其他 > 详细

easyUI droppable组件使用

时间:2015-10-07 09:37:07      阅读:224      评论:0      收藏:0      [点我收藏+]

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‘); //好像也没有效果呀;

 

easyUI droppable组件使用

原文:http://www.cnblogs.com/stono/p/4858204.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!