<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/easyui.css">
    <!--<link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/black/easyui.css">-->
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/icon.css">
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>面板嵌套</h2>
<p>面板可以放置在容器中，可以包含其他组件。west、east、north、south表示方位；region：地区</p>
<div style="margin:20px 0 10px 0;"></div>
<div class="easyui-panel" title="Nested Panel" style="width:700px;height:200px;padding:10px;">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',split:true" style="width:100px;padding:10px">
            西部 Content
        </div>
        <div data-options="region:'east'" style="width:100px;padding:10px">
            东部 Content
        </div>
        <div data-options="region:'center'" style="padding:10px">
            中间 Content
        </div>
        <div data-options="region:'north'" style="padding:10px">
            北部 Content
        </div>
        <div data-options="region:'south'" style="padding:10px">
            南部 Content
        </div>
    </div>
</div>

<br><br><br><br>
<div id="box1" class="box1" style="width: 100px; height: 100px; background-color: #f00">第一个盒子</div>
<div id="box2" class="box2" style="width: 100px; height: 100px; background-color: #f0f">第二个盒子</div>
<div id="box3" class="box3" style="width: 100px; height: 100px; background-color: yellow">第三个盒子</div>

<script>
    $(document).ready(function(){
        $('#box1').draggable();//第一个盒子可以随意拖动，且原来的位置被之后的盒子取代
        $('#box2').draggable({
            //第二个盒子也可以随意拖动，创建一个克隆（clone）了原来元素的代理（proxy）让其可以拖动。
            //鼠标放开的瞬间原来的盒子才会消失，否则是一种复制出来的盒子在动的现象。
            proxy:'clone'
        });

        //通过创建自定义代理（proxy）让其可以拖动。且拖动时显示自定义的文本内容
        $('#box3').draggable({
            proxy:function(source){
                var p = $('<div class="proxy">hello 点击拖动会显示我的文本内容</div>');
                p.appendTo('body');
                return p;
            }
        });
    })
</script>

</body>
</html>

easyUI拖动：draggable()方法运用的更多相关文章

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

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

  2. 把JSON数据载入到页面表单的两种思路（对easyui自带方法进行改进）

    #把JSON数据载入到页面表单的两种思路(对easyui自带方法进行改进) ##背景 项目中经常需要把JSON数据填充到页面表单,一开始我使用easyui自带的form load方法,觉得效率很低,经 ...

  3. easyui datebox定位到某一个日期， easyui datebox直接定位到具体的日期， easyui datebox MoveTo方法使用

    easyui datebox定位到某一个日期, easyui datebox直接定位到具体的日期, easyui datebox MoveTo方法使用 >>>>>> ...

  4. EasyUI基础Draggable(拖)

    学前easyui基于解析器,装载机.对他们来说,入门阶段,我们只需要在这一个简单的了解,第一阶段,不宜过深后,. 接着,根据easyui排列官方网站为了学习文件Draggable小工具. Dragga ...

  5. easyUI拖动课程进课程表

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>拖动 ...

  6. easyUI拖动购物车案例

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  7. easyui 属性 事件 方法

    在easyui当中 属性和事件可以按照json定义的对象来使用. /*在easyui中 属性和事件的使用方法相同*/ var loginWinJson = { closed: false, closa ...

  8. EasyUI使用tree方法生成树形结构加载两次的问题

    html代码中利用class声明了easyui-tree,导致easyUI解析class代码的时候先解析class声明中的easyui-tree这样组件就请求了一次url:然后又调用js初始化代码请求 ...

  9. EasyUI 兼容 IE6 方法总结

    1.combobox 如果单选,multiple必须也设置为true.这个ie7如果没设置,会保持多选状态,算是一个bug. 2.combobox 最好用js来渲染,而不是一开始就class=“eas ...

随机推荐

  1. TCP详解——传输控制协议（总述）

    初次熟读TCP,随着TCP的发展路线对他深入了解,真心觉得TCP协议的美妙之处.他比UDP这家伙更加可靠,深得我们信任.通过一个个英文简写,例如CRC.ARQ.RTT.ACK.SACK.DACK等,组 ...

  2. docker部署路飞学城

    docker部署路飞学城blog来啦 部署需求分析: 之前是将nginx.django.vue直接部署在服务器上,既然学了docker,试试怎么部署在docker中 1.环境准备 一台linux服务器 ...

  3. 图标网站，IcoMoon，自己动手做一个 font

    很有用的IcoMoon,在线制作工工具:https://icomoon.io/app/#/select/font 大神解说:如何灵活利用免费开源图标字体-IcoMoon篇http://www.zhan ...

  4. MyBatis全局配置文件MyBatis-config.xml代码

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC ...

  5. Mongodb 备份 数据导出导入

    MongoDB 客户端工具 mongochef 可以进行一系类操作 MongoDB 非客户端操作 : mongod 备份导出 mongoexport -h IP --port 端口 -u 用户名 -p ...

  6. MongoDB - 日常操作二

    MongoDB 开启认证与用户管理  ./mongo # 先登录 use admin # 切换到admin库 db.addUser(") # 创建用户 db.addUser('zhansan ...

  7. 日期与时间控件QDate, QTime, QDateTime

    QDate类用于处理公历日期.QTime类用于处理时间.QDateTime类将QDate对象和QTime对象整合为一个对象 QDate: from PyQt5.QtCore import QDate, ...

  8. HDU 1162 Eddy's picture （最小生成树 prim）

    题目链接 Problem Description Eddy begins to like painting pictures recently ,he is sure of himself to be ...

  9. python的__mro__与__slot__

    class A(object): def __init__(self): print ' -> Enter A' print ' <- Leave A' class B(A): def _ ...

  10. adb查看安卓设备系统Android版本

    adb shell getprop "ro.build.version" 结果中如下两项便是版本信息: [ro.build.version.release]: [4.4.4][ro ...