<!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. python自动化运维之路~DAY7

    python自动化运维之路~DAY7 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.客户端/服务器架构 C/S 架构是一种典型的两层架构,其全称是Client/Server,即 ...

  2. JAVA-大白话探索JVM-运行时内存（三）

    前面章节 JAVA-大白话探索JVM-类加载器(一) JAVA-大白话探索JVM-类加载过程(二) JVM运行时内存 通过之前的章节,我们知道.class类如何加载到内存中,如图红框 开始讲讲内存空间 ...

  3. XQuartz简介

    这是一个类似于中转的软件,比如现在在Mac上,YY语音还没有官方版的,但其实在Mac上,有了XQuartz就可以实现运行YY了,下载这个从Windows上移植过来的软件,然后打开的时候,Mac会提醒你 ...

  4. Redis（二）冰叔带你了解Redis-哨兵模式和高可用集群解析

    前言    Redis 的 主从复制 模式下,一旦 主节点 由于故障不能提供服务,需要手动将 从节点 晋升为 主节点,同时还要通知 客户端 更新 主节点地址,这种故障处理方式从一定程度上是无法接受的. ...

  5. NOI2018场外游记

    鬼晓得APIO以后我经历了些什么 Day 0 好像没什么要记的 Day 1 下午去参加开幕式 神tm大型落地柜装风扇空调下放冰块 开幕式,,,hot chocolate是真的hot(强制在线?卡常?) ...

  6. Ubuntu16.04安装搜狗拼音输入法（中文输入法）

    虽然网上有很多教程,但是我觉得我的很适合那些真正的小白... 1.下载文件 由于我要给多台电脑安装搜狗输入法,所以用的是文件夹安装,不是命令行安装. 打开官网http://pinyin.sogou.c ...

  7. 第18月第10天 iOS11 uicollectionview

    1. - (void)collectionView:(UICollectionView *)collectionView willDisplaySupplementaryView:(UICollect ...

  8. GET和POST有什么区别？及为什么网上多数答案都是错的（转载）

    这仅仅是我认为比较好的关于get和post区别的解答,然后把作者的一些文字踢除留下比较干的部分. 作者:南柯之石链接:http://www.cnblogs.com/nankezhishi/archiv ...

  9. E - 着色方案 HYSBZ - 1079 （计数DP）

    题目链接:https://cn.vjudge.net/contest/281963#problem/E 题目大意:中文题目 具体思路:这个题脑洞有点大,因为ci的数据量非常小,所以我们可以根据这个来进 ...

  10. aar jar包打包

    使用Android Studio Module的方式编译出aar和jar包: aar包:打aar包时,gradle compile依赖编译进来的包不会被打到aar包中,所以接入aar的应用仍然需要添加 ...