<!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. gearman 简介

    附件  Gearman.doc 1:介绍gearman 1.1 简介 Gearman是一个用来把工作委派给其他机器.分布式的调用更适合做某项工作的机器.并发的做某项工作在多个调用间做负载均衡.或用来在 ...

  2. 《C++ Primer Plus》16.2 智能指针模板类

    智能指针是行为类似于指针的类对象,单这种对象还有其他功能.本节介绍三个可帮助管理动态内存分配的智能指针类.先来看看需要哪些功能以及这些功能是如何实现的.请看下面的函数:void remodel(std ...

  3. Java实现给定字符串的倒序输出

    1.除2判中法: public static String orderDesc(String str){ byte [] bytes = str.getBytes(); for ( int i = 0 ...

  4. Charles抓包(iOS的http/https请求)

    Charles抓包(iOS的http/https请求) Charles安装 HTTP抓包 HTTPS抓包 1. Charles安装 官网下载安装Charles:https://www.charlesp ...

  5. ngingx安装错误 ./configure: error: the HTTP rewrite module requires the PCRE library.

    有时候,我们需要单独安装nginx,来处理大量的下载请求.单独在Centos5安装nginx遇到的rewrite和HTTP  cache错误解决办法: wget http://nginx.org/do ...

  6. 【Python3】 使用django 2.0 + python3.6.4 创建应用

    python版本:3.6.4 django版本:2.0 1 创建应用 输入命令 python manage.py startapp blog 2 在项目目录创建 templates文件夹 用于存放我们 ...

  7. Android手机资料拷贝导出工具 --- 91手机助手

    http://zs.91.com/

  8. 让人一看就懂的excel相对引用和绝对引用案例解析

    http://www.ittribalwo.com/article/2831.html 内容提要:本文的excel相对引用和绝对引用.混合引用的使用方法案例截选自<Excel效率手册 早做完,不 ...

  9. JavaScript 异步进化史

    前言 JS 中最基础的异步调用方式是 callback,它将回调函数 callback 传给异步 API,由浏览器或 Node 在异步完成后,通知 JS 引擎调用 callback.对于简单的异步操作 ...

  10. slf4j + log4j 是如何初始化的

    SLF4J的全称是 Simple Logging Facade for Java(简单java日志门面) SLF4J自己不提供具体的日志功能实现,只是提供了一个统一的日志门面,在这个统一的门面之下,用 ...