通过 $.fn.draggable.defaults 重写默认的 defaults。

用法

通过标记创建可拖动(draggable)元素。

<div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
<div id="title" style="background:#ccc;">title</div>
</div>

使用 javascript 创建可拖动(draggable)元素。

<div id="dd" style="width:100px;height:100px;">
<div id="title" style="background:#ccc;">title</div>
</div>
$('#dd').draggable({
handle:'#title'
});

属性

名称 类型 描述 默认值
proxy string,function 拖动时要使用的代理元素,设置为 'clone' 时,克隆元素将被用作代理。如果指定一个函数,它必须返回一个 jQuery 对象。
下面的实例演示了如何创建简单的代理对象。
  1. $('.dragitem').draggable({
  2. proxy: function(source){
  3. var p = $('<div style="border:1px solid #ccc;width:80px"></div>');
  4. p.html($(source).html()).appendTo('body');
  5. return p;
  6. }
  7. });
null
revert boolean 如果设置为 true,拖动结束后元素将返回它的开始位置。 false
cursor string 拖动时的 css 光标(cursor)。 move
deltaX number 拖动的元素相对于当前光标的 X 轴位置。 null
deltaY number 拖动的元素相对于当前光标的 Y 轴位置。 null
handle selector 启动可拖动(draggable)的处理(handle)。 null
disabled boolean 如果设置为 true,则停止可拖动(draggable)。 false
edge number 能够在其中开始可拖动(draggable)的拖动宽度。 0
axis string 定义拖动元素可在其上移动的轴,可用的值是 'v' 或 'h',当设为 null,将会沿着 'v' 和 'h' 的方向移动。 null

事件

名称 参数 描述
onBeforeDrag e 拖动前触发,返回 false 就取消拖动。
onStartDrag e 目标对象开始拖动时触发。
onDrag e 拖动期间触发。返回 false 将不进行实际的拖动。
onStopDrag e 拖动停止时触发。

方法

名称 参数 描述
options none 返回选项(options)属性(property)。
proxy none 如果设置了代理(proxy)属性就返回拖动代理(proxy)。
enable none 启用拖动动作。
disable none 禁用拖动动作。

EasyUI Draggable 可拖动的更多相关文章

  1. EasyUI ---- draggable可拖动的用法

    <link href="~/Scripts/easyui1.5/themes/default/easyui.css" rel="stylesheet" / ...

  2. easyUI draggable组件使用

    easyUI draggable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字

    先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...

  4. JQuery easyui (1) Draggable(拖动)组件

    很不习惯这种强迫式的学习,但谁叫我不是老师了,所以还是决定坚持练习,顺带为博客加点东西.虽然我还是很反感短时间内惯性的去熟悉一个工具. easyui做为一个封装了JQusey的UI插件,其实还是蛮好用 ...

  5. EasyUI - Draggable 拖动控件

    效果: html代码: <div id="box" style="width: 400px; height: 200px; background-color: #f ...

  6. EasyUI系列学习(三)-Draggable(拖动)

    一.创建拖动组件 0.Draggable组件不依赖于其他组件 1.使用标签创建 <div class="easyui-draggable" id="box" ...

  7. EasyUI Tree节点拖动到指定容器

    效果图:将tree节点拖动到指定的DIV中,结果显示节点的id和text 代码: <!DOCTYPE html> <html> <head> <meta ch ...

  8. easyui组件window拖动时超过浏览器顶部则无法拖回

    项目研发过程中遇到一个问题,easyui的window可以随意拖动或者放大缩小,但是鼠标只有放在“header”上面时鼠标箭头才会变成四个方向的箭头,也就是只有在这时才能拖动窗口:但是当拖动的窗口超过 ...

  9. EasyUI 基本的拖动和放置

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Ba ...

随机推荐

  1. dwr框架使用总结——简单示例

    1.新建web项目,项目名为dwr 2.导入以下jar包: dwr.jar.classes12.jar.commons-logging-1.0.4.jar和commons-logging.jar 3. ...

  2. Faster-RCNN

  3. 如何Request客户端的传值的Data

    我们在做B/S的项目,客户端向服务端传值的时候,一般都是request接受. Request常用三个接受方式为:Request.QueryString,Request.Form,Request.Par ...

  4. oracle_存储过程_没有参数_更新过期申请单以及写日志事务回滚

    CREATE OR REPLACE PROCEDURE A_MEAS_MIINSP_PLAN_UPDATEASvs_msg VARCHAR2(4000);log_body VARCHAR2(400); ...

  5. Cocos2d-x 3.0final 终结者系列教程10-画图节点Node中的Action

    Action是作用在Node上的逻辑处理,比方让Node移动.旋转.缩放.变色.跳跃.翻转.透明等等.都有相相应的Action Action怎样在Node上使用 1. 定义Action对象 如 aut ...

  6. round()

    round() 用于对一个数值进行四舍五入,如果接收两个参数,则第二个参数表示保留多少位小数 In [1]: round(1.5324) Out[1]: 2.0 In [2]: round(1.532 ...

  7. C语言简介(转自菜鸟教程)

    C 简介 C 语言是一种通用的高级语言,最初是由丹尼斯·里奇在贝尔实验室为开发 UNIX 操作系统而设计的.C 语言最开始是于 1972 年在 DEC PDP-11 计算机上被首次实现. 在 1978 ...

  8. OpenGL超级宝典总结(二)2D/3D笛卡尔坐标、坐标裁剪、纹理坐标、MVP转换等概念

    如果你想把图形渲染在正确的位置上,那么坐标的设置就很重要了.在OpenGL中,与坐标相关的主要有笛卡尔坐标.坐标裁剪.纹理坐标.MVP(Model View Projection)转换. 1.笛卡尔坐 ...

  9. java基础---->FilenameFilter之文件过滤

    FilenameFilter用于对列表中文件名的过滤,今天我们就开始java中FilenameFilter的学习.好多年了,你一直在我的伤口中幽居,我放下过天地,却从未放下过你,我生命中的千山万水,任 ...

  10. Sql Server 关于列名带中括号"[]"的问题

    1.如果列名为数据库的关键字则自动加上中括号“[]” 例如[level] 2.如果列名中带有特殊符号.[date(a)] 数据存储的过程: 1.在添加数据的时候:要带有中括号,有必要在添加参数的时候不 ...