当前位置：首页 > news >正文

droppable

news 来源：原创 2024/5/3 11:42:17

easyui的droppable使得被声明的元素变为可放置元素，即该元素可做为容器，盛放被拖拽的元素

<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/icon.css" />
<script type="text/javascript">
    $(function(){
        $.fn.droppable.defaults.disabled=true;//设置默认为不可以放置元素
        $('#dd').droppable({
            accept : '#box',
            disabled : false,//设置容器可以放置元素
            onDragEnter : function(e,source){//被拖拽的元素到容器时 触发
                $(this).css('background','blue');
                console.log('----'+e);//e 当前对象
                for(x in e){
                    console.log(x+'-------'+e[x]);
                }
                console.log('----'+source);// source 被拖拽的对象
                for(x in source){
                    console.log(x+'-------'+source[x]);
                }
                //alert("enter");
            },
            onDragOver : function(e,source){//被拖拽的元素经过容器时 触发
                $(this).css('background','#f00');
                alert("over");
            },
            onDragLeave : function(e,source){//被拖拽的元素离开容器时 触发
                $(this).css('background','#ff0');
            },
            onDrop : function(e,source){//被拖拽的元素放置在容器时 触发
                $(this).css('background','#000');
                console.log($("#dd").droppable("options"));//获得 对象的 option属性对象
                //$("#dd").droppable("disable");//设置容器不可以放置元素
                //$("#dd").droppable("enable");//设置容器可以放置元素
            }
        });
        $('#box').draggable({
        });
    });
</script>
</head>
<body>
<div id="dd" style="width:600px;height:400px;background:black"></div>
<div id="box" style="width:100px;height:100px;background:#ccc;">
    <span id="pox">内容部分</span>
</div>
</body>
</html>