所以本篇要总结的Draggable组件同样有两种方式加

上文已经提到过了jQuery EasyUI插件引用一般大家常用的有三种方法(排除easyload加载方式),所以本篇要计算的Draggable组件同样有三种艺术加载:

(1)、使用class加载情势:

<div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;">
内容部分
</div>

(2)、JS 加载调用

$('#box').draggable();

一模一样上文也说了,使用class属性不方便人民群众大家进行组件的任何品质,所以我们选拔JS调用的法子,后边的小说也是利用JS调用的办法。

该器件有多少天性、方法及触发事件,不在这里列举了,都置于代码示例里同临时候增进注释了。
示例:

<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Easy UI</title> 
<meta charset="UTF-8" /> 
<script type="text/javascript" src="easyui/jquery.min.js"></script> 
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> 
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" rel="external nofollow" /> 
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" /> 
<script> 
  $(function () { 
  $.fn.draggable.defaults.cursor = 'text';//*****采用这种方式重写默认值 

  $('#box').draggable({ 
    //revert : true,  默认值为false 设置为true的时候拖动结束后返回起始位置 
    //cursor : 'text', 定义拖动时指针的样式 
    //handle : '#pox', 开始拖动时的句柄,就是点击哪里可以拖动,参数是一个JQ选择器 
    //disabled : true, 设置为true的时候,禁止拖动 
    //edge : 0,  
    //axis : 'v',    不写:任意拖动 值为v:垂直拖动  值为h:水平拖动 
    //proxy : 'clone', 当使用'clone'的时候则克隆一个替代元素拖动,如果指定一个函数,则可以自定义替代元素。 
    deltaX : 50,//被拖动元素对应于当前光标位置X 
    deltaY : 50,//被拖动元素对应于当前光标位置Y 
    proxy : function (source) { 
      var p = $('<div style="width:400px;height:200px;border:1px dashed #ccc">'); 
      p.html($(source).html()).appendTo('body'); 
      return p; 
    } 
    /** 
    可触发的事件: 

    onBeforeDrag : function (e) { 
      alert('拖动前触发!'); 
    }, 
    onBeforeDrag : function (e) { 
      //return false; 
    }, 
    onStartDrag : function (e) { 
      alert('拖动开始触发!'); 
      console.log($('#box').draggable('proxy')); 
    }, 
    onDrag : function (e) { 
      //alert('拖动过程触发!'); 
    }, 
    onStopDrag : function (e) { 
      alert('拖动结束后触发!'); 
    } 
    */ 


  }); 

  //$('#box').draggable('disable');//禁止拖动 

  //$('#box').draggable('enable');//可以拖动 

  //alert($('#box').draggable('options'));  //返回对象属性 

}); 

</script> 
</head> 
<body> 
  <div id="box" style="width:400px;height:200px;background:orange;"> 
    内容部分 
  </div> 
</body> 
</html> 

点击下载源代码:jQuery EasyUI Draggable拖动组件.rar)

如上便是本文的全体内容,希望对我们的读书抱有帮助,也指望我们多多帮忙脚本之家。

你大概感兴趣的文章:

  • jquery.ui.draggable汉语文书档案(原作翻译)
  • 怎么着选拔jQuery Draggable和Droppable完毕拖拽功效
  • jQuery EasyUI API 普通话文书档案 - Draggable 可拖拽
  • jQuery UI-Draggable 参数集结
  • jquery.ui.draggable汉语文书档案

本文由金沙澳门官网-www.js333com-金沙js333com发布于金沙澳门官网计算机,转载请注明出处:所以本篇要总结的Draggable组件同样有两种方式加

您可能还会对下面的文章感兴趣: