EasyUI-draggable
draggable用来在界面上创建一个可以拖动的元素，既然是可以拖动的元素，那么它在拖动过程中会有下面的几个事件：onBeforeDrag、onStartDrag、onDrag、onStopDrag。
创建一个拖动元素一般需要两个部分：一个包装层，用来保存在拖动过程的内容；另外一个，是拖动的对象，相当于是水桶把。下面的示例中，拖动#title来改变#db的位置。
<body>
<div id="db" style="width: 100px;">
<p id="title" style="background: #ccc;">
draggable</p>
<p id="P1">
1111111111</p>
<p id="P2">
2222222222</p>
<p id="P3">
3333333333</p>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#db').draggable({
handle: '#title'
});
});
</script>
</body>
另外，也可以不指定handle属性，那么整个#db都是拖动的。
基本属性
1.handle
拖动元素中，用于拖动的部分。
2.axis
控制拖动方向，如果不指定，那么可以任意拖动。通过， 'v' 或 'h'，这两个值，来指定水平或垂直方向上的拖动。
3.cursor
用来指定拖动时，光标的样式，默认是：move
4.revert
如果这个属性值是ture，那么拖动松开后，拖动元素会回到起点。
5.proxy
通过赋值“clone”，拖动时，会创建一个副本。
拖拽限制
<body>
<div style="position: relative; overflow: hidden; border: 1px solid #ccc; width: 500px; height: 300px">
<div id="db" style="width: 100px; height: 100px; background: #fafafa; border: 1px solid #ccc;">
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#db').draggable({
onDrag: function (e) {
var d = e.data;
if (d.left < 0) {
d.left = 0;
}
if (d.top < 0) {
d.top = 0;
}
if (d.left + $(d.target).outerWidth() > $(d.parent).width()) {
d.left = $(d.parent).width() - $(d.target).outerWidth();
}
if (d.top + $(d.target).outerHeight() > $(d.parent).height()) {
d.top = $(d.parent).height() - $(d.target).outerHeight();
}
}
});
});
</script>
</body>
通过在拖拽事件中获取db和外部层，然后限制top和left。下面在调试中，输出e.data的值。
学校课程表
下面代码运行有个bug，有时拖动结束了，这个元素失去了再次拖动的能力。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>EasyUI</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;" />
<link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="easyui/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<style type="text/css">
.left{width: 120px;float: left;}
.left table{background: #E0ECFF;}
.left td{background: #eee;}
.right{float: right;width: 570px;}
.right table{width: 100%;}
.right td{background: #E0ECFF;color: #444;text-align: center;padding: 2px;width: 100px;}
.right td.drop{background: #fafafa;width: 100px;}
.right td.over{background: #FBEC88;width: 100px;}
.item{text-align: center;border: 1px solid #499B33;background: #fafafa;color: #444;width: 100px;}
.assigned{border: 1px solid #BC2A4D;}
</style>
</head>
<body>
<div style="width: 800px;">
<div class="left">
<table>
<tr>
<td>
<div class="item">英语</div>
</td>
</tr>
<tr>
<td>
<div class="item">科学</div>
</td>
</tr>
<tr>
<td>
<div class="item">音乐</div>
</td>
</tr>
<tr>
<td>
<div class="item">历史</div>
</td>
</tr>
<tr>
<td>
<div class="item">计算机</div>
</td>
</tr>
<tr>
<td>
<div class="item">数学</div>
</td>
</tr>
<tr>
<td>
<div class="item">艺术</div>
</td>
</tr>
<tr>
<td>
<div class="item">伦理学</div>
</td>
</tr>
</table>
</div>
<div class="right">
<table>
<tr>
<td></td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td>08:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td>09:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td>10:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td>11:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td>12:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td>13:00
</td>
<td colspan="5">午餐时间
</td>
</tr>
<tr>
<td>14:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td>15:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td>16:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
$(function () {
$('.left .item').draggable({
revert: true,
proxy: 'clone'
});
//可拽入容器
$('.right td.drop').droppable({
onDragEnter: function () {
$(this).addClass('over');
},
onDragLeave: function () {
$(this).removeClass('over');
},
onDrop: function (e, source) {
$(this).removeClass('over');
if ($(source).hasClass('assigned')) {
//如果有红色的边框，表示是已经在课表中的课程
$(this).empty().append(source);
} else {
//没有红色边框，是从左侧源中拖出的，要创建一个副本
var c = $(source).clone().addClass('assigned');
$(this).empty().append(c);
//这个副本也是可以拖动的
c.draggable({
revert: true,
onStopDrag: function (e) {
//停止拖动的时候，如果在表格之外，则删除这个对象
var d = e.data;
var thisF = d.left;
var thisT = d.top;
var tableF = $(".right table").offset().left;
var tableW = $(".right table").width();
var tableT = $(".right table").offset().top;
var tableH = $(".right table").height();
if (thisF < tableF || thisF > tableF + tableW || thisT < tableT || thisT > tableT + tableH) {
$(this).remove();
}
}
});
}
}
});
});
</script>
</body>
</html>
EasyUI-draggable的更多相关文章
- easyUI draggable组件使用
easyUI draggable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- easyUI draggable插件使用不当，导致拖动div内部文本框无法输入；设置echarts数据为空时就显示空白，不要动画和文字
先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...
- EasyUI ---- draggable可拖动的用法
<link href="~/Scripts/easyui1.5/themes/default/easyui.css" rel="stylesheet" / ...
- EasyUI - Draggable 拖动控件
效果: html代码: <div id="box" style="width: 400px; height: 200px; background-color: #f ...
- EasyUI ---- draggable购物车
@{ ViewBag.Title = "Easyui_draggable"; Layout = "~/Views/Shared/Layouts.cshtml"; ...
- EasyUI Draggable 可拖动
通过 $.fn.draggable.defaults 重写默认的 defaults. 用法 通过标记创建可拖动(draggable)元素. <div id="dd" clas ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（55）-工作流设计-表单布局
系列目录 前言:这一节比较有趣.基本纯UI,但是不是很复杂 有了实现表单的打印和更加符合流程表单方式,我们必须自定义布局来适合业务场景打印!我们想要什么效果?看下图 (我们没有布局之前的表单和设置布局 ...
- JQuery easyui （1） Draggable（拖动）组件
很不习惯这种强迫式的学习,但谁叫我不是老师了,所以还是决定坚持练习,顺带为博客加点东西.虽然我还是很反感短时间内惯性的去熟悉一个工具. easyui做为一个封装了JQusey的UI插件,其实还是蛮好用 ...
- EasyUI基础知识Draggable(拖累)
学习前easyui基于解析器,装载机.对他们来说,入门阶段,我们只需要在一个简单的理解.第一阶段,不宜过深后,.接着,根据easyui订购的文件正在研究安排官方网站Draggable插入. Dragg ...
- jQuery EasyUI API - Base - Draggable [原创汉化官方API]
最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...
随机推荐
- Linux系统编程@进程管理（二）
1.创建守护进程(Deamon) 守护进程的概念与作用 后台服务程序 – 系统服务,进程名字往往以’d’结尾,生存周期比较长(系统装入时启动,关闭时候终止.系统装入两种启动方式:1从启动脚本.etc/ ...
- java多线程：并发包中ReentrantReadWriteLock读写锁的原理
一:读写锁解决的场景问题--->数据的读取频率远远大于写的频率的场景,就可以使用读写锁.二:读写锁的结构--->用state一个变量.将其转化成二进制,前16位为高位,标记读线程获取锁的次 ...
- 通过js对表单对象的便捷获取
<form name="a"> <input name="s" value="33"/> </form> ...
- weblogic管理2 - 创建并启动一个managed server
创建一个managed server. 1. 进入网页console管理页面,如:http://10.100.25.14:7001/console , 先点击->服务器 (红色标记框) ...
- ASP.NET会话（Session）保存模式--终于知道session为什么丢失了
[原创]ASP.NET会话(Session)保存模式 作者:寒羽枫(cityhunter172) 大家好,已有四个多月没写东东啦.今日抽空就说一下 Session 在 .Net v1.0/v1.1 中 ...
- 00-Java 语言简介
一.开发环境搭建: (一).JAVA语言简介: 1.JAVA语言简介: (1)什么是JAVA:Java是一种计算机编程语言.它是一种计算机编程语言.它是一种软件开发平台.它是一种软件运行平台.它是一种 ...
- 将m个苹果放入n个盘子的问题【转】
来自:http://blog.csdn.net/qq675927952/article/details/6312255 问题1: m----->相同, n---> 相同,可为空 将m个苹果 ...
- PorterDuff.Mode error
Android PorterDuff.Mode error: PorterDuff cannot be resolved to a variable Answers: Add this t ...
- Android: 在 TextView 里使用删除线
Android: 在 TextView 里使用删除线 分类: Android2014-09-25 13:17 3431人阅读 评论(0) 收藏 举报 以编程的方式添给 TextView 添加删除线: ...
- Transact-SQL 学习小结
1.把系统里所有用全局临时表的改成局部临时表,不然并发高时会引发对象已经存在的问题,不要用##要用#. 2.int 不能写成 id = '1',比如Select * from A where ID=' ...