0301 Draggable（拖动）、【对象、事件、方法的使用规则】

 

注意：使用 $.fn.draggable.defaults.重写默认值对象名 = 默认对象值  可以修改默认对象值

1 创建一个可拖动元素

 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/test02.js"></script>
17 
18     <link rel="shortcut icon" href="../img/study.ico">
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24         #box{
25             height: 300px;
26             width: 500px;
27             background-color: skyblue;
28         }
29     </style>
30 </head>
31 
32 <body>
33     <div id="box">
34         <span>我是内容</span>
35     </div> 
36 </body>
37 </html>
HTML代码
 1 /**
 2  * 
 3  * @authors Your Name (you@example.org)
 4  * @date    2017-05-15 10:23:00
 5  * @version $Id$
 6  */
 7 $(function() {
 8     // alert('Hello EasyUI');
 9     $("#box").draggable();
10 });
JS代码

 

2 属性

　　所有的属性都定义在jQuery.fn.{plugin}.defaults里面。例如，对话框属性定义在jQuery.fn.dialog.defaults里面

　　注意：deltaX 和 deltaY 必须和 proxy　配合使用

 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         #box{
25             width: 500px;
26             height: 300px;
27             background-color: skyblue;
28         }
29     </style>
30 </head>
31 
32 <body>
33     <div id="box">
34         <span id="text">Hello EasyUI</span>   
35     </div>
36 </div>
37 </body>
38 </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     $("#box").draggable({
 9         // revert : true,   // flase/ture
10         // cursor : "move",  // move/text
11         // handle : "#text", // 设置可以拖动的句柄
12         // disable : true, // 停止拖动
13         // edge : 10, // 可进行拖动的位置
14         // axis : "v", // "h" 设置拖动方向
15 
16         // proxy : "clone", // t拖动是克隆一个放在原来的位置，停止拖动后消失
17         // deltaX : 10, // 拖动时光标距离被果冻元素的x距离
18         // deltaY : 10,
19         proxy : function(source){
20             // console.log(source); // 打印查看数据源是什么
21             var p = $('<div style="width:500px;height:300px;border:1px solid red";">');
22             p.html($(source).html()).appendTo('body');
23             // $(source).html() : 读取数据源中的内容
24             // p.html($(source).html()) ：将数据源中的内容放到p中去
25             return p;
26         },
27     });
28 })
JS代码

 

3 事件

　　所有的事件（回调函数）也都定义在jQuery.fn.{plugin}.defaults里面

 1 /**
 2  * 
 3  * @authors Your Name (you@example.org)
 4  * @date    2017-05-11 10:35:42
 5  * @version $Id$
 6  */
 7 $( function() {
 8     $("#box").draggable({
 9 
10         onBeforeDrag : function(e) {
11             alert('拖动之前触发');
12             // return false; // 返回false时拖动失效
13         },
14 
15         onStartDrag : function(e) {
16             alert('拖动开始时触发');
17         },
18 
19         
20     });
21 
22 
23 })
JS代码
 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         #box{
25             width: 500px;
26             height: 300px;
27             background-color: skyblue;
28         }
29     </style>
30 </head>
31 
32 <body>
33     <div id="box">
34         <span id="text">Hello EasyUI</span>   
35     </div>
36 </div>
37 </body>
38 </html>
HTML代码

 

4 方法

　　4.1 调用方法的语法

　　　　$('selector').plugin('method', parameter); 

　　　　　　selector 是jQery对象选择器。

　　　　　　plugin 是插件的名称。

　　　　　　method 是相应插件现有的方法。

　　　　　　parameter 是参数对象，可以是一个对象、字符串等。

　　4.2 所有方法都定义在jQuery.fn.{plugin}.methods。每个方法都有2个参数：jq和param。第一个参数'jq'是必须的，这是指的jQuery对象。第二个参数'param'是指传入方法的实际参数。

 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         #box{
25             width: 500px;
26             height: 300px;
27             background-color: skyblue;
28         }
29     </style>
30 </head>
31 
32 <body>
33     <div id="box">
34         <span id="text">Hello EasyUI</span>   
35     </div>
36 </div>
37 </body>
38 </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     $("#box").draggable({
 9         proxy : function(e) {
10             var p = $('<div style="border: 1px solid red; width:500px; height:300px" />');
11             p.html('你在拖动元素').appendTo('body');
12             return p;
13         },
14 
15         onStartDrag : function(e) {
16             console.log($('#box').draggable('proxy'));
17         },
18     });
19 
20     console.log($('#box').draggable('options'));
21     $('#box').draggable('disable');
22     $('#box').draggable('enable');
23     
24 })
JS代码

 

 5 注意：对象和事件的使用方式是通过对象传值，方法是通过字符串传值

 　　　　本篇博客的代码可以当做是 添加属性、事件、方法的模板使用

 

posted @ 2017-05-15 10:55  寻渝记  阅读(642)  评论(0)    收藏  举报