easyUI draggable组件使用：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="easyui/jquery.min.js"></script>

    <script src="easyui/jquery.easyui.min.js"></script>

    <script src="easyui/locale/easyui-lang-zh_CN.js"></script>

    <script src="js/test003.js"></script>

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

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

</head>

<body>

     <div id="box1" class="easyui-draggable" style="background:#ccc;width:300px;height:200px">this is draggable</div>

     <div id="box" style="background:#eee;width:300px;height:200px"><div id="pox">title</div>this is JS draggable</div>

</body>

</html>
$(function(argument) {

    var obj = {

        //revert:true,//true表示返回初始位置

        //cursor:'text',//鼠标在移动过程中的样子

        //handle:'#pox',//能拖动的部分，一般是在里面的title层

        //disabled:true,//禁止拖动了；

        //edge:10,//禁止拖动的边宽度；

        //axis:'h',//v-只能竖直拖动，h-只能水平拖动

        proxy: 'clone', //拖动过程中克隆一个对象

        //deltaX:10,//拖动的物体其相对于鼠标的x偏移量,与proxy结合使用

        //deltaY:10,//拖动的物体其相对于鼠标的y偏移量,与Proxy结合使用

        // proxy:function  (source) {

        //     console.log(source);// source是拖动的HTML对象；

        //     var p = $('<div style="border:1px solid #ccc;width:80px"></div>');

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

        //     return p;// p是生成出来的对象，拖着走的那个；

        // },

        onBeforeDrag: function(e) { //对应mousedown事件

            console.log('onBeforeDrag');

            console.log(e);

            //return false;//将取消拖动；

        },

        onStartDrag: function(e) { //对应mousedown事件

            console.log('onStartDrag');

            console.log(e);

        },

        onDrag: function(e) { //对应mousemove和mouseup事件

            // console.log('onDrag');

            // console.log(e);

            //return false;//拖不动了，但是能到达目标位置；

            //console.log($('#box').draggable('options'));//获得options属性

            //console.log($('#box').draggable('proxy'));//获得proxy对象；

            //$('#box').draggable('disable');//！！不能这样写，会崩溃的；

        },

        onStopDrag: function(e) { //对应mouseup事件

            console.log('onStopDrag');

            console.log(e);

        }

    };

    $('#box').draggable(obj);
$('#box').draggable('disable'); // 有效果呀！
});

easyUI draggable组件使用的更多相关文章

  1. Easyui部分组件讲解

    Easyui部分组件讲解 目  录 1.... Accordion(可折叠标签)... 2 1.1          实例... 2 1.2          参数... 3 2.... DateBo ...

  2. Easyui主要组件用法

    Easyui主要组件用法说明: 1.  combogrid用法 说明:combogrid可提供翻页列表的数据选择并可进行数据的过滤查询(查询的传人参数为q,可在控制器中获取这个参数传过来的值,下面的示 ...

  3. 对easyui datagrid组件的一个小改进

    #对easyui datagrid组件的一个小改进 ##问题 在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...

  4. easyUI panel组件

    easyUI panel组件: 属性的使用: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. easyUI progressbar组件

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

  6. easyUI linkbutton组件

    easyUI linkbutton组件: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  7. easyUI tootip组件使用

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

  8. easyUI resizable组件使用

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

  9. easyUI droppable组件使用

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

随机推荐

  1. Android---Parcelable包装类的作用

    android提供了一种新的类型:Parcel.本类被用作封装数据的容器,封装后的数据可以通过Intent或IPC传递. 除了基本类型以外,只有实现了Parcelable接口的类才能被放入Parcel ...

  2. Windows系统字体与文件对照表

    源:Windows系统字体与文件对照表 宋体 (TrueType) = SIMSUN.TTF 黑体 (TrueType) = simhei.ttf 楷体_GB2312 (TrueType) = sim ...

  3. FreeRTOS代码剖析

    FreeRTOS代码剖析之1:内存管理Heap_1.c   FreeRTOS代码剖析之2:内存管理Heap_2.c   FreeRTOS(V8.0.1)系统之xTaskGenericCreate() ...

  4. postgresql 抽样查询

    curl -GET 'http://****/query' --data-urlencode "db=db" --data-urlencode "q=SELECT las ...

  5. Quick Cocos2dx 与 Eclipse 连真机debug遇到的问题

    今天下午解决了因为偷懒一直忍受的两个让我不爽很久了的问题: 1Eclipse无法连接手机调试的问题. 在设备管理器中看到的Android设备有黄色的感叹号, 说明驱动不是最新的. 按照网上搜到的解决方 ...

  6. [即时通讯]openfire启动失败解决办法

    当你发现你的电脑上的openfire无论你是重新安装还是重启都无法启动的情况下你可以按照我下面写的那些终端指令来启动你的openfire不用再去重新做你的系统了. 一般你发现你的openfire打开出 ...

  7. php上传zip文件在线解压文件在指定目录下，CI框架版本

    我从网上找的文件php在线解压zip压缩文件 文件为jy.php可以直接执行,但是怎样将其加到CI框架中呢?? jy.php文件 <?php header("content-Type: ...

  8. HTML学习（四）样式

    通过使用 HTML4.0,所有的格式化代码均可移出 HTML 文档,然后移入一个独立的样式表. 实例:例1:本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化.& ...

  9. BZOJ 1653 [Usaco2006 Feb]Backward Digit Sums ——搜索

    [题目分析] 劳逸结合好了. 杨辉三角+暴搜. [代码] #include <cstdio> #include <cstring> #include <cmath> ...

  10. 通过非root用户访问VNC

    我采用的是realvnc5.3.2.对于非root用户通过vnc访问linux桌面,网络上绝大数文章都是说要去配置/etc/sysconfig/vncservers.但安装完realvnc5.3.2之 ...