0401 Droppable（放置）

注意：使用 $.fn.droppable.defaults.重写默认值对象名 = 属性值 可以设置属性的默认值

1 属性

 

2 事件

 

3 方法

 

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <script type="text/javascript" src="../js/test.js"></script>
17 
18     <link rel="shortcut icon" href="../img/study04.ico">
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24         #box1{
25             width: 500px;
26             height: 500px;
27             background-color: skyblue;
28         }
29         #box2{
30             width: 100px;
31             height: 100px;
32             background-color: red;
33         }
34     </style>
35 </head>
36 
37 <body>
38     <div id="box1"></div>
39     <div id="box2"></div>
40 </div>
41 </body>
42 </html>
HTML代码
 1 /**
 2  * 
 3  * @authors Your Name (you@example.org)
 4  * @date    2017-05-11 10:35:42
 5  * @version $Id$
 6  */
 7 $( function() {
 8     $('#box2').draggable({
 9         proxy : function(source){
10             var p = $('<div style="width:100px; height:100px; border:1px solid red;" />');
11             p.html('你在拖拽box2').appendTo('body');
12             return p;
13         },
14     });
15 
16     $.fn.droppable.defaults.disabled = true;
17     $('#box1').droppable({
18         accept : '#box2',
19         disabled : false, // 如果这里是true，那么后面的事件就不会被触发
20         onDragEnter : function(e, source){
21             $(this).css('background', 'blue');
22         },
23         onDragLeave : function(e, source) {
24             $(this).css('background', 'green');
25         },
26         onDrop : function(e, source) {
27             $(this).css("background", '#FFCE00');
28         }
29     });
30     console.log($('#box1').droppable('options'));
31     
32 })
JS代码

 

posted @ 2017-05-15 11:30  寻渝记  阅读(174)  评论(0)    收藏  举报