<!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. CDN的那些细枝末节

    起源: 原本打算系统看看关于axios的介绍,无意中就看见一句"Using cdn",于是百度一下,"cdn"是什么? 名词解释:CDN CDN的全称是Cont ...

  2. JavaScript的格式--从格式做起，做最严谨的工程师

    1.JavaScript的格式: JavaScript区分大小写: JavaScript脚本程序须嵌入在HTML文件中: JavaScript脚本程序中不能包含HTML标记代码:(双引号) 每行写一条 ...

  3. .net 将DLL程序集生成到指定目录中

    .在程序集右键属性 .在程序集属性界面中找到生成事件 在预先生成事件命令行添加: IF NOT EXIST "$(ProjectDir)..\Bin" MD "$(Pro ...

  4. IOS设计模式第七篇之观察者设计模式

    版权声明:原创作品,谢绝转载!否则将追究法律责任. 观察者设计模式 在观察者设计模式里面,一个对象通知其他的对象一些状态的改变.涉及这些对象不需要知道另一个对象---因此鼓励解耦设计模式.这个设计模式 ...

  5. C#串口介绍以及简单串口通信程序设计实现

    C#串口介绍以及简单串口通信程序设计实现 周末,没事干,写个简单的串口通信工具,也算是本周末曾来过,废话不多,直接到主题 串口介绍 串行接口简称串口,也称串行通信接口或串行通讯接口(通常指COM接口) ...

  6. 1007: [HNOI2008]水平可见直线[维护下凸壳]

    1007: [HNOI2008]水平可见直线 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 7184  Solved: 2741[Submit][Sta ...

  7. pip安装python包出现Cannot fetch index base URL http://pypi.python.org/simple/

    pipinstall***安装python包,出现 Cannot fetch index base URL  http://pypi.python.org/simple /错误提示或者直接安装不成功. ...

  8. Excel转Json

    参考: Excel2JSON Excel转JSON Excel另存为JSON的技巧  (office的插件) excel2json 游戏程序员的自我修养 (其他人写的工具) Excel转JSON格式- ...

  9. 第一个springMVC入门程序

    先看下项目结构 要加载与spring相关的包 HelloController.java(注意是在包controller下) package controller; import org.springf ...

  10. 9.21 form 和Ajax详解

    form 表单 参考连接  : http://www.cnblogs.com/liwenzhou/p/8747872.html