zoukankan      html  css  js  c++  java
  • droppable

    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="600px;height:400px;background:black"></div>
    <div id="box" style="100px;height:100px;background:#ccc;">
        <span id="pox">内容部分</span>
    </div>
    </body>
    </html>
  • 相关阅读:
    s检验|k-S检验|适应性检验|独立性检验|Cintinuity correction |Fisher‘s Exact Test|Likelihood Ratio|Person Chi-Square|φ系数|Cramer’s V|列联系数
    方差分析||MSA/MSE|
    专利|Pct||
    会议信息|CNKI|AIAA|万方|AIP|CNKI|EI|CPCI|BP|INSPEC
    switch break, or no break
    Defining the Encoding
    Python is becoming the world’s most popular coding language
    用C与Python计算1! + 2! + 3! + ... +100!的值
    素数判断
    Richard Stallman's quest for creating a complete Unix-compatible software system called GNU (for Gnu's Not Unix)
  • 原文地址:https://www.cnblogs.com/m01qiuping/p/6486324.html
Copyright © 2011-2022 走看看