<!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. mybatis 之 parameterType="java.util.HashMap">

    /** * 根据goods_no 和 goods_id 来查询商品信息 * * @param goodsNos * @return */ public List<Goods> getGoo ...

  2. MVC的初步认识理论

    说起来写博客可以说一个月没来啦,我们狠狠的放假一个月,想一想都奇怪.而是想一下以后的假期还会这样吗?或许这是作为学生的我们的最后一个长的假期啦,以后就要面对工作再也没有寒假暑假之分啦,在这一个月的时间 ...

  3. Swift - static和class的使用

    Swift中表示 “类型范围作用域” 这一概念有两个不同的关键字,它们分别是static和class.这两个关键字确实都表达了这个意思,但是在其他一些语言,包括Objective-C中,我们并不会特别 ...

  4. Matlab练习——矩阵和数组的操作

    题目来自:<战胜MATLAB必做练习50道> 题目有更改,改成了我想写的样子. 1. 创建一个3×3矩阵,并将其扩充为4×5矩阵 clear; clc; mat1 = ones(,) ma ...

  5. Android开发训练之第五章——Building Apps with Connectivity & the Cloud

    Building Apps with Connectivity & the Cloud These classes teach you how to connect your app to t ...

  6. 【python3】爬取新浪的栏目分类

    目标地址: http://www.sina.com.cn/ 查看源代码,分析: 1 整个分类 在 div main-nav 里边包含 2 分组情况:1,4一组 . 2,3一组 . 5 一组 .6一组 ...

  7. 通过orderby关键字，LINQ可以实现升序和降序排序。LINQ还支持次要排序。

    通过orderby关键字,LINQ可以实现升序和降序排序.LINQ还支持次要排序. LINQ默认的排序是升序排序,如果你想使用降序排序,就要使用descending关键字. static void M ...

  8. 如何快速打开.iso文件（不借助专门的工具）

    如何快速打开.iso文件(不借助专门的工具) 把.iso文件重命名为.rar文件,然后解压即可

  9. 使用MSBUILD 构建时出错 error MSB3086: 任务未能使用 SdkToolsPath“”或注册表项“XXX”找到“LC.exe”，请确保已设置 SdkToolsPath。

    如果项目有添加有WB引用,比如引用其它网站的WEB服务等,那么VS在编译时会自动生成个 [项目名称].Serializers.dll的文件,就是把引用服务中的相关对象信息生成硬编码的程序集,以提高效率 ...

  10. javascript 原型世界浅析

    一. 无中生有 起初,什么都没有. 造物主说:没有东西本身也是一种东西啊,于是就有了null: 现在我们要造点儿东西出来.但是没有原料怎么办? 有一个声音说:不是有null嘛? 另一个声音说:可是nu ...