Draggable(拖动)组件
学习要点：
1、加载方式
2、属性列表
3、事件列表
4、方法列表

EasyUI中Draggable（拖动）组件的使用方法，这个组件不依赖于其他组件。

1、加载方式
//class方式
<div id="box" class="easyui-draggable" style="width:400px;height:200px;background:orange;">
</div>

//JS调用
<div id="box" style="width:400px;height:200px;background:orange;">
</div>
$(function(){
$("#box").draggable();
});

2、属性
名称 类型 描述 默认值
revert boolean 回复，如果设置为true的话，拖动结束后元素将返回它的起始位置 false
cursor string 光标，拖动时的css光标(cursor) move
handle selector 句柄，启动可拖动的处理句柄，就是只有哪个组件才可以拖动元素 null
edge number 边缘，能够在其中开始可拖动的拖动宽度，就是指容器的边缘区域，边缘区域无法拖动，边缘表示所有容器的边 0
proxy string,function 代理，拖动时要使用的代理对象，设置为“clone”时，克隆元素将被用作代理。如果指定一个函数，它必须返回一个jQuery对象，这个jquery对象也就是代理对象
deltax number 拖动的元素相当于当前光标的x轴位置,只有启动代理才生效 null
deltaY number 拖动的元素相当于当前光标y轴的位置，只有启动代理才生效 null
disabled boolean 如果设置为true，则可停止拖动 false
axis string 轴，定义拖动元素可在其上移动的轴，可用‘v’或者‘h’ null

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

4、方法
名称 参数 描述
options none 返回选项（options）属性（property）
proxy none 如果设置了代理（proxy）就返回拖动代理（proxy）
这个只有在拖动时有效，我们把它放在开是拖动的事件中

enable none 启用拖动动作
disable none 禁用拖动动作

设置默认值对象：$.fn.draggable.defaults重写默认对象
$fn.draggable.defaults.cursor = 'text';

<html>

<title>index</title>

<head>

<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>

    <script type="text/javascript" src="../../js/01/t2.js"></script>

    <link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css">

</head>

<body>

    <!--

   <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:orange;">

   </div>

   -->

   <div id="box" style="width:400px;height:200px;background:orange;">

        <span id="pox">拖动区域</span>

   </div>

</body>

</html>

$(function(){

    $.fn.draggable.defaults.cursor = 'text';

    $("#box").draggable({

        //revert : true,

        //cursor : "text",

        //handle : "#pox",

        //edge : 50

        proxy : "clone",

        //proxy : function(source){

            //var p = $('<div style="border:1px solid red; width:400px; height:200px;"></div>');

            //p.html($(source).html()).appendTo("body");

            //return p;

        //},

        //deltaX : 50,

        //deltaX : 50

        //disabled : true,

        //axis : 'v'

        //onBeforeDrag : function(e){

            //alert("拖动前触发");

        //}

        //onBeforeDrag : function(e){

            //return fasle;

        //}

        //onStartDrag : function(e){

            //alert("拖动开始时触发");

            //console.log($('#box').draggable('proxy'));

        //}

        //onDrag : function(e){

            //alert("拖动过程中触发");

        //}

        //onStopDrag : function(e){

            //alert("拖动结束后触发");

        //}

    });

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

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

    //console.log($('#box').draggable('options'));

    //console.log($('#box').draggable('options'));

});

Draggable拖动的更多相关文章

  1. 第一百九十三节，jQuery EasyUI，Draggable(拖动)组件

    Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其 他组 ...

  2. Draggable(拖动)组件

    一．加载方式 //class 加载方式 <div id="box" class="easyui-draggable" style="width: ...

  3. EasyUI - Draggable 拖动控件

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

  4. jQuery Easy UI Draggable(拖动)组件

    上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式(排除easyload载入方式),所以本篇要总结的Draggable组件相同有两种方式载入: (1).使用class载入 ...

  5. Draggable(拖动框)

    一.class加载方式 <div id="box" class="easyui-draggable" style="width:400px;he ...

  6. Vue.Draggable

    Vue.Draggable拖动效果 下载包:npm install vue-draggable --save 组件中引进依赖: import draggable from 'vuedraggable' ...

  7. EasyUI中Base(基础)的基本用法

    EasyUI中Base(基础)的用法 一.Base(基础) 1.parser 解析器 2.easyloader 简单加载 3.draggable 拖动 4.droppable 放置 5.resizab ...

  8. jQuery Easy UI 开发笔记

    1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...

  9. JqueryEasyUI教程

    第一章EasyUI中弹出框dialog的使用为div标签加上class="easyui-dialog"即可使用一.引入文件介绍jquery.min.js:jquery核心文件,不再 ...

随机推荐

  1. 20145316《Java程序设计》第十周学习总结

    学习内容总结 网络编程 1.网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据. 2.程序员所作的事情就是把数据发送到指定的位置,或者接收到指定的数据,这个就是狭义的网络编程范畴. 3.在发 ...

  2. jvm2

    垃圾回收器的实现: 1.让用户都暂停,不再产生垃圾,就去收集垃圾.新生代用复制算法清理垃圾,老生代用标记整理算法搜集垃圾. 优秀的算法:服务端默认是CMS收集器. %..jvm案例演示 内存: Jco ...

  3. zookeeper和淘宝dubbo的关系

    Dubbo建议使用Zookeeper作为服务的注册中心. 1.   Zookeeper的作用:         zookeeper用来注册服务和进行负载均衡,哪一个服务由哪一个机器来提供必需让调用者知 ...

  4. ThinkPHP语法总结

    1, $data存放实体: $data['title'] = I('post.title'); // 标题 $data['content'] = I('post.content'); // 正文 $d ...

  5. Apache httpd服务部署

    1. yum安装 yum install httpd yum install httpd-devel yum install httpd-manual 2. 配置 vim /etc/httpd/con ...

  6. Java线程状态流转---线程

    说明:线程共包括以下5种状态.1. 新建状态(New)         : 线程对象被创建后,就进入了新建状态.例如,Thread thread = new Thread().2. 就绪状态(Runn ...

  7. 20145312 《Java程序设计》第四周学习总结

    20145312 <Java程序设计>第四周学习总结 学习笔记 Chapter 6 6.1何为继承 1.定义:面向对象中子类继承父类,避免重复的行为定义. 6.1.1 继承共同行为 1.以 ...

  8. 20135302魏静静——linux课程第四周实验及总结

    linux课程第四周实验及总结 一.实验 我选择的是第20号系统调用,getpid 代码如下: /* getpid.c */ #include <unistd.h> #include &l ...

  9. c++ 使用WinHTTP实现文件下载功能

    因为要项目中要想要实现一个软件自动更新的功能,之前是使用socket直接下载.但切换下载源的时候很麻烦.所以换用http方式. 网上找了很多资料,基本上就是下面几种: 1.curllib //功能强大 ...

  10. MQ的前世今生

    1983年孟买26岁的工程师Vivek Ranadive设想一种软件总线,同年Teknekron诞生了.     最初用于高盛,用于解决金融交易.于是发布订阅的MQ The Information B ...