<!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. Expected BEGIN_ARRAY but was BEGIN_OBJECT

    Expected BEGIN_ARRAY but was BEGIN_OBJECT at line 1 column 3519 path $.data[1].inspector_user Gson 中 ...

  2. 操作系统定期定时执行python脚本

    1. Windows 控制面板 --> 管理工具 -->任务计划程序 --> 创建任务 接下来就是设置执行的时机以及脚本路径等 1>>常规 设置任务名称描述,以及是否执行 ...

  3. iOS - UITextView在调用textViewDidChange方法，九宫格相关中文输入的问题

    问题一 iOS textView在调用 UITextViewDelegate 的 textViewDidChange方法,九宫格相关中文输入的问题 有时候,需要在textViewDidChange处理 ...

  4. 基础知识《零》---一张图读懂JDK,JRE,JVM的区别与联系

  5. Contain的使用

  6. 怎么修改wamp的本地时间

    最近配置了一台wamp环境的服务器,但发现时间与本地时间是地区别的,并且 利用time获取的时间再利用date显示有时差的,下面我们一起来导致原因与解决办法. 如果date时间不一致可以使用date_ ...

  7. Oracle 12C 创建用户连接pdb

    测试环境: C:\ora12c\product\12.1.0\dbhome_1\BIN>sqlplus.exe /nolog SQL*Plus: Release 12.1.0.1.0 Produ ...

  8. C# 递归与非递归算法与数学公式

    1.递归 递归:程序调用自身的编程技巧称为递归(recursion). 优点是:代码简洁,易于理解. 缺点是:运行效率较低. 递归思想:把问题分解成规模更小,但和原问题有着相同解法的问题. 1)下面是 ...

  9. 23种设计模式之装饰模式（Decorator）

    装饰模式是一种对象结构型模式,可动态地给一个对象增加一些额外的职责,就增加对象功能来说,装饰模式比生成子类实现更为灵活.通过装饰模式,可以在不影响其他对象的情况下,以动态.透明的方式给单个对象添加职责 ...

  10. 【BZOJ5146】有趣的概率 概率+组合数（微积分）

    [BZOJ5146]有趣的概率 Description "可爱的妹子就像有理数一样多,但是我们知道的,你在数轴上随便取一个点取到有理数的概率总是0,"芽衣在床上自顾自的说着这句充满 ...