EasyUI 基本的拖动和放置
<!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 基本的拖动和放置的更多相关文章
- jQuery EasyUI 拖放 – 基本的拖动和放置
jQuery EasyUI 拖放 - 基本的拖动和放置 在jQuery EasyUI中,可以实现HTML元素的基本拖动和放置. <div id="dd1" class=&qu ...
- 第一百九十三节，jQuery EasyUI，Draggable(拖动)组件
Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其 他组 ...
- easyui组件window拖动时超过浏览器顶部则无法拖回
项目研发过程中遇到一个问题,easyui的window可以随意拖动或者放大缩小,但是鼠标只有放在“header”上面时鼠标箭头才会变成四个方向的箭头,也就是只有在这时才能拖动窗口:但是当拖动的窗口超过 ...
- EasyUI Tree节点拖动到指定容器
效果图:将tree节点拖动到指定的DIV中,结果显示节点的id和text 代码: <!DOCTYPE html> <html> <head> <meta ch ...
- EasyUI ---- draggable可拖动的用法
<link href="~/Scripts/easyui1.5/themes/default/easyui.css" rel="stylesheet" / ...
- EasyUI Draggable 可拖动
通过 $.fn.draggable.defaults 重写默认的 defaults. 用法 通过标记创建可拖动(draggable)元素. <div id="dd" clas ...
- jQuery EasyUI Portal 保存拖动位置，仿谷歌DashBoard效果的
仿照谷歌http://www.google.com/ig?hl=zh-CN中的效果,本文档中包含了拖动后保存位置至Cookie中以及拖动后不保存位置的html文件效果,文档结构
- easyui datagrid实现拖动表头
$.extend($.fn.datagrid.methods, { columnMoving: function (jq) { return jq.each(function () { var tar ...
- easyui datagrid 列拖动
实现代码-code <script type="text/javascript"> $.extend($.fn.datagrid.methods, { columnMo ...
随机推荐
- MQ java 基础编程（一）
本文转自:http://www.blogjava.net/i369/articles/88035.html 编写人:邬文俊 编写时间 : 2006-2-16 联系邮件 : wenjunwu430@gm ...
- 嵌入式ROOTFS transplantation
作一个嵌入式Linux rootfs,并且实现 web 服务 1. 文件系统简介 •理论上说一个嵌入式设备如果内核能够运行起来,且不需要运行用户进程的话,是不需要文件系统的,文件系统简单的说就是一种目 ...
- Android学习之蓝牙操作
BluetoothAdapter 用法 蓝牙运行原理:通过BluetoothAdapter 蓝牙适配器处理任务,如果蓝牙被启动之后,系统会自动去搜索其它设备,如果匹配到附近的设备就发送一个广播,Bro ...
- Visual C++中去除警告
在编程中,编译器警告的意思是提问程序员:如果这样做将会出现意外的错误,你确定要这样做吗? 在很多情况下,我们写程序的时候会出现一些警告,而这些警告我们都知道这样做的确是需要的并且程序中多处出现这种做法 ...
- thinkphp3.2 实现留言功能
写一个例子说明一下: 前端:http://www.mmkb.com/zhendao/index/feedback.html <form method="post" actio ...
- Material Design系列第四篇——Defining Shadows and Clipping Views
Defining Shadows and Clipping Views This lesson teaches you to Assign Elevation to Your Views Custom ...
- 2. React组件的生命周期
2. React组件的生命周期 使用React开发时候用到最多的就是React的组件了,通过继承React.Component,加入constructor构造函数,实现Render方法即可.这当中Re ...
- SharpGL学习笔记(二) 模型变换(几何变换)
(二) 模型变换 模形变换就是指的在世界坐标系中(world space)做“移动”,“旋转", "缩放"三种操作. 首先要说明的,在Opengl中,是用4x4矩阵进行坐 ...
- 异构GoldenGate 12c 双向复制配置
1.配置window,添加checkpoint表(本文windows和linux互为source和target) GGSCI (WIN-GM5PVS1CILH) 1> view param ./ ...
- LeetCode 26 Remove Duplicates from Sorted Array （移除有序数组中重复数字）
题目链接: https://leetcode.com/problems/remove-duplicates-from-sorted-array/?tab=Description 从有序数组中移除重 ...