jQuery EasyUI 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;">
    <span id="pox">内容部分</span>
  </div>
</body>
</html> 

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 如何使用jQuery Draggable和Droppable实现拖拽功能

    在以前的文章中我已经介绍了web开发中基本拖放原理,现在给出需要完成的功能.最后运行的效果如下图所示: 主要功能需求说明:1.左侧的元素结构最后会通过Ajax call服务器的数据来生成,能支持多级元素.父节点可以折叠起来 2.用户可以通过拖放的操作,将元素从左侧拖放到右侧.如果是拖的父节点元素,那么需要把它子节点的元素一并拖到右边 3.元素放到右侧,右侧可以接受元素的区域有2种可能.一种新建一个区域,就类似"华东交通大学"所示.另外一种就是拖放到已经有元素的区域.两者的关系是&quo

  • jQuery UI-Draggable 参数集合

    Draggable 库文件:ui/ui.core.js.ui/ui.draggable.js ============================================================ Default: $("#draggable").draggable(); ============================================================ constrain-movement(限制范围移动): $("#d

  • jquery.ui.draggable中文文档

    注意事项:     1. 以下格式为既定的格式, 为了统一性, 需要修改时, 大家商议     2. 格式中的所有项都是选填, 如果没有, 不写就是了.     3. 由于是XML格式的, 所以, 所有标签中间填写文本的地方(最重要是代码, 一定要加, 不然以后解析有困难), 都需要加上 <!--[CDATA[这中间写内容]]>     4. 翻译过程中, 一块对应的是一个<translate />标签.     5. 希望大家工作愉快. 复制代码 代码如下: <?xml v

  • jquery.ui.draggable中文文档(原文翻译)

    [原文翻译]JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.Draggable的元素受影响css: ui-draggable, 拖动过程中的css: ui-draggable-dragging.如果需要的不仅仅是拖, 而是一个完整的拖放功能, 请参阅JQuery UI 的Droppable插件, 该插件提供了一个draggable放的目标.所有的回调函数(start, stop, drag等事件)接受两个参数: event: 浏览器原生的事件ui: 一个JQuery的

  • jQuery EasyUI API 中文文档 - Draggable 可拖拽

    用$.fn.draggable.defaults重写默认的defaults. 用法 复制代码 代码如下: <div id="dd" style="width:100px;height:100px;"> <div id="title" style="background:#ccc;">title</div> </div> 复制代码 代码如下: $('#dd').draggable(

  • jQuery EasyUI Draggable拖动组件

    上文已经提到过了jQuery EasyUI插件引用一般我们常用的有两种方式(排除easyload加载方式),所以本篇要总结的Draggable组件同样有两种方式加载: (1).使用class加载方式: <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 </div> (2).JS 加载调用

  • Jquery Easyui搜索框组件SearchBox使用详解(19)

    本文实例为大家分享了Jquery Easyui搜索框组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <input id="ss" class="easyui-searchbox" style="width:300px" data-options="prompt:'Please Input Value',menu:'#box'"> </input> <div id="b

  • Jquery Easyui进度条组件Progress使用详解(8)

    本文实例为大家分享了Jquery Easyui进度条组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <div class="easyui-progressbar" data-options="value:60" style="width:400px;"> </div> JS调用加载 <div id="box" style="width: 400px;">

  • jQuery EasyUI Panel面板组件使用详解

    panel面板组件,跟前面的组件用法几乎都差不多,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 还有一点跟前面不同的就是面板内容可以请求远程数据. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <scr

  • 如何使用jquery easyui创建标签组件

    jQuery EasyUI v1.4.4 下载网址:http://www.jb51.net/codes/70218.html 本教程将展示如何使用easyui创建一个标签组件.标签可以动态地添加或删除多个面板,你可以使用标签在同一个页面上显示不同的实体. 标签一次只能显示一个面板,每个面板都有标题.图表和关闭按钮.当标签被选中之后,会显示相应面板的内容. 使用HTML标记创建标签,其中包括一个DIV容器和一些DIV面板. < div class="easyui-tabs" sty

  • Jquery Easyui表单组件Form使用详解(30)

    本文实例为大家分享了Jquery Easyui表单组件的实现代码,供大家参考,具体内容如下 加载方式 表单组件只能在 JS 区域设置,首先定义一张表单. <form id="box" method="post"> <div> <label for="name">Name:</label> <input class="easyui-validatebox" type=&quo

  • Jquery Easyui分割按钮组件SplitButton使用详解(17)

    SpliButton组件依赖于Menu(菜单)组件和 LinkButton(按钮)组件 加载方式 Class加载 <a href="javascript:void(0)" id="edit" class="easyui-splitbutton" data-options="menu:'#box',iconCls:'icon-edit'">编辑</a> <div id="box"

  • EasyUI Tree树组件无限循环的解决方法

    在学习jquery easyui的tree组件的时候,在url为链接地址的时,发现如果最后一个节点的state为closed时,未节点显示为文件夹,单击会重新加载动态(Url:链接地址)形成无限循环.如: tree.json [{ "id":1, "text":"Folder1", "iconCls":"icon-save", "children":[{ "text"

  • jQuery EasyUI 开源插件套装 完全替代ExtJS

    前台开发,很多人喜欢用JQuery,但是在做后台管理系统,特别是企业管理系统,例如WEB进销存系统等,很多人都会选择ExtJS,因为ExtJS提供了非常多的UI界面,并且非常友好. 我要告诉大家,现在JQuery也有一个很好的UI插件了,几乎完全可以替代ExtJS,下面来看看对比: 上图是ExtJS和EasyUI的界面对比,是不是很类似呢,很强大呢? 呵呵~~ 漂亮的消息弹出,支持遮罩效果. 这个效果也很酷~ 更多的酷炫功能请看下方功能列表... Easy UI的使用也非常地简单: 复制代码 代

  • easyui Draggable组件实现拖动效果

    easyui做为一个封装了JQusey的UI插件,其实还是蛮好用的,至少省了像我这种渣渣很多时间. Draggable的加载方式有两种: 1,通过class加载,如下: <div id="box" class="easyui-draggable"></div> 通过JS加载,如下: $('#box').draggable(); 以上两点需要注意的是不管是'easyui-draggable',还是draggable 都是固定的,他们都是通过调用

随机推荐