<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Slider - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<style type="text/css">
.dd-demo{
width:60px;
height:60px;
border:5px solid #d3d3d3;
position:absolute;
}
.proxy{
border:1px dotted #333;
width:60px;
height:60px;
text-align:center;
background:#fafafa;
}
#dd1{
background:#E0ECFF;
left:20px;
top:20px;
}
#dd2{
background:#8DB2E3;
left:100px;
top:20px;
}
#dd3{
background:#FBEC88;
left:180px;
top:20px;
}
</style>
</head>
<body>
<div id="dd1" class="dd-demo"></div>
<div id="dd2" class="dd-demo"></div>
<div id="dd3" class="dd-demo"></div>
<script>
$(function(){
$('#dd1').draggable();
$('#dd2').draggable({
proxy:'clone'
});
$('#dd3').draggable({
proxy:function(source){
var p = $('<div class="proxy">proxy</div>');
p.appendTo('body');
return p;
}
});
});
</script>
</body>
</html>

EasyUI 基本的拖动和放置的更多相关文章

  1. jQuery EasyUI 拖放 – 基本的拖动和放置

    jQuery EasyUI 拖放 - 基本的拖动和放置 在jQuery EasyUI中,可以实现HTML元素的基本拖动和放置. <div id="dd1" class=&qu ...

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

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

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

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

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

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

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

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

  6. EasyUI Draggable 可拖动

    通过 $.fn.draggable.defaults 重写默认的 defaults. 用法 通过标记创建可拖动(draggable)元素. <div id="dd" clas ...

  7. jQuery EasyUI Portal 保存拖动位置，仿谷歌DashBoard效果的

    仿照谷歌http://www.google.com/ig?hl=zh-CN中的效果,本文档中包含了拖动后保存位置至Cookie中以及拖动后不保存位置的html文件效果,文档结构

  8. easyui datagrid实现拖动表头

    $.extend($.fn.datagrid.methods, { columnMoving: function (jq) { return jq.each(function () { var tar ...

  9. easyui datagrid 列拖动

    实现代码-code <script type="text/javascript"> $.extend($.fn.datagrid.methods, { columnMo ...

随机推荐

  1. python3.4连接和读取oracle数据表

    想用python连接Oracle并查询数据表,就写了个Demo.参考了以下网址. Python学习之 cx_Oracle学习记录 一 http://my.oschina.net/bxxfighting ...

  2. Android学习之Handler消息

    Android系统规定,一些耗时的操作不能放在UI线程中去执行,这样会报一个ANR错误.所以为了避免该问题,我们需要开启一个新的线程去执行一些耗时操作:开启新的线程,将耗时的操作在新线程里面去执行, ...

  3. spring mvc 篇

    [1]spring mvc 实现多文件上传 http://blog.csdn.net/a1314517love/article/details/24183273 http://bbs.csdn.net ...

  4. PHP 函数引用传值

    <?php /* * @1 $arr = array_fill(1,100,'bbb'); echo memory_get_usage()."<br>"; fun ...

  5. Linux设备驱动剖析之IIC（一）

    写在前面 由于IIC总线只需要两根线就可以完成读写操作,而且通信协议简单,一条总线上可以挂载多个设备,因此被广泛使用.但是IIC总线有一个缺点,就是传输速率比较低.本文基于Linux-2.6.36版本 ...

  6. JS 运行、复制、另存为 代码。

    //运行代码 function runEx(cod1) { cod = document.getElementById(cod1) var code = cod.value; if (code != ...

  7. find中的-print0和xargs中-0的奥妙

    原文地址:find中的-print0和xargs中-0的奥妙作者:改变自己 默认情况下, find 每输出一个文件名, 后面都会接着输出一个换行符 ('n'), 因此我们看到的 find 的输出都是一 ...

  8. Qt编写数据库通用翻页demo（开源）

    在Qt与数据库结合编程的过程中,记录一多,基本上都需要用到翻页查看记录,翻页有个好处就是可以减轻显示数据的表格的压力,不需要一次性将数据库表的记录全部显示,也基本上没有谁在一页上需要一次性显示所有记录 ...

  9. jQuery属性操作（一）

    下载了jQuery的UI组件,发现内容还挺多的,还是决定先把jQuery的源码看完一遍之后再涉足UI组件.考虑到队列和动画使用较少,特别是动画,基本开始使用css3完成.因此暂时略过,开始看jQuer ...

  10. pycharm的版本问题

    1.分类: 专业版是收费的 Professional 教育版是免费 edu https://www.jetbrains.com/pycharm-edu/whatsnew/ 社区版是免费的 Free C ...