EasyUI系列学习(三)-Draggable(拖动)
一、创建拖动组件
0.Draggable组件不依赖于其他组件
1.使用标签创建
<div class="easyui-draggable" id="box" style="width: 200px; height: 100px; left: 100px; background: orange">拖动组件</div>
2.使用js创建
<div id="box" style="width: 200px; height: 100px; left: 100px; background: orange">拖动组件</div>
<script>
$(function () {
$("#box").draggable();
});
</script>
二、属性
1.revert:如果设置为true,在拖动停止时元素将返回起始位置
<script>
$(function () {
$("#box").draggable({
revert:true
});
});
</script>
2.cursor:拖动时的CSS指针样式
$(function () {
$("#box").draggable({
cursor: "text"
});
});
3.handle:开始拖动的句柄
<div id="box" style="width: 200px; height: 100px; left: 100px; background: orange">
<div id="pox">拖动组件</div>
</div>
<script>
$(function () {
$("#box").draggable({
handle: "#pox"
});
});
</script>
4.disabled:如果设置为true,则停止拖动
<script>
$(function () {
$("#box").draggable({
disabled: true
});
});
</script>
5.edge:可以在其中拖动的容器的宽度(理解成padding<=20时无法拖)
<script>
$(function () {
$("#box").draggable({
edge: 20
});
});
</script>
6.axis:定义元素移动的轴向,可用值有:'v'或'h',当没有设置或设置为null时可同时在水平和垂直方向上拖动
<script>
$(function () {
$("#box").draggable({
axis: 'h'
});
});
</script>
7.proxy:在拖动的时候使用的代理元素,当使用'clone'的时候,将使用该元素的一个复制元素来作为替代元素
<script>
$(function () {
$("#box").draggable({
proxy: "clone",
deltaX: 50,
deltaY: 50
});
});
</script>
三、事件
1.onBeforeDrag:在拖动之前触发,返回false将取消拖动
<script>
$(function () {
$("#box").draggable({
onBeforeDrag: function (e) {
alert("拖动前触发");
//return false;
}
});
});
</script>
2.onStartDrag:在目标对象开始被拖动时触发
<script>
$(function () {
$("#box").draggable({
onStartDrag: function (e) {
alert("拖动开始触发");
}
});
});
</script>
3.onDrag:在拖动过程中触发,当不能再拖动时返回false
<script>
$(function () {
$("#box").draggable({
onDrag: function () {
alert("拖动过程触发");
}
});
});
</script>
4.onStopDrag:在拖动停止时触发
<script>
$(function () {
$("#box").draggable({
onStopDrag: function () {
alert("拖动结束触发");
}
});
});
</script>
四、方法
1.disable:禁止拖动
<script>
$(function () {
$("#box").draggable({ });
$("#box").draggable("disable");
});
</script>
2.enable:允许拖动
<script>
$(function () {
$("#box").draggable({ });
$("#box").draggable("enable");
});
</script>
3.options:返回属性对象
<script>
$(function () {
$("#box").draggable({ });
console.log($("#box").draggable("options"));
});
</script>
4.proxy:如果代理属性被设置则返回该拖动代理元素
<script>
$(function () {
$("#box").draggable({
proxy: function (source) {
//source是id为box的div对象
//console.log(source);
var p = $("<div style='width:400px;height:200px;border:1px dashed red'></div>");
//p.appendTo("body");
p.html($(source).html()).appendTo("body");
return p;
}
});
});
</script>
五、重写默认值对象
<script>
$(function () {
//所有该组件,都是文本指针
$.fn.draggable.defaults.cursor = "text";
$("#box").draggable({ });
});
</script>
EasyUI系列学习(三)-Draggable(拖动)的更多相关文章
- 第一百九十三节,jQuery EasyUI,Draggable(拖动)组件
Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其 他组 ...
- jQuery EasyUI 拖放 – 基本的拖动和放置
jQuery EasyUI 拖放 - 基本的拖动和放置 在jQuery EasyUI中,可以实现HTML元素的基本拖动和放置. <div id="dd1" class=&qu ...
- Draggable拖动
Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 EasyUI中Draggable(拖动)组件的使用方法,这个组件不依赖于其他组件. 1.加载方式 / ...
- mac air/pro 启用三指拖动手势
mac air/pro 启用三指拖动手势 一直以来用mac触控版丰富的手势来完成日常的工作,非常的效率和方便! 今天重新安装了系统发面三指拖动不好用了! 仔细查看了 设置--触控板 里面的各种选择尝试 ...
- 2015 款 Macbook Pro 的 ForceTouch 触控板开启 三指拖动
RT, 默认的触控板设置中没有了三指拖动这个选项, 但是可以通过勾选 辅助功能 -> 鼠标与触控板 -> 触控板选项 中的 启用拖移 来启用三指拖动...
- OS X 10.11 El Capitan 三指拖动的开启方法
触摸板的三指拖动功能已经被移到“辅助功能”中. 开启步骤: 系统偏好设置-辅助功能-鼠标与触摸板,点击下面的“触摸板选项...”按钮,勾选“启用拖拽”并且从下拉列表里选择“三指拖移” .
- EasyUI - Draggable 拖动控件
效果: html代码: <div id="box" style="width: 400px; height: 200px; background-color: #f ...
- EasyUI基础知识Draggable(拖累)
学习前easyui基于解析器,装载机.对他们来说,入门阶段,我们只需要在一个简单的理解.第一阶段,不宜过深后,.接着,根据easyui订购的文件正在研究安排官方网站Draggable插入. Dragg ...
- jQuery EasyUI API - Base - Draggable [原创汉化官方API]
最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...
随机推荐
- Scala解析Json格式
Scala解析Json格式 代码块 Scala原生包 导入包 import scala.util.parsing.json._ def main(args: Array[String]): Unit ...
- POJ 1328 Radar Installation 贪心算法
Description Assume the coasting is an infinite straight line. Land is in one side of coasting, sea i ...
- leetcode算法学习----155. 最小栈(MinStack )
下面题目是LeetCode算法155题: https://leetcode.com/problems/min-stack/ 题目1:最小函数min()栈 设计一个支持 push,pop,top 操作, ...
- Swift: 转换NSString to String
如下代码获取一个String?的结果 let s = NSString(data: data, encoding: encoding) return s as? String
- 《从零開始学Swift》学习笔记(Day 55)——使用try?和try!差别
原创文章.欢迎转载.转载请注明:关东升的博客 在使用try进行错误处理的时候,常常会看到try后面跟有问号(? )或感叹号(!),他们有什么差别呢? 1.使用try? try?会将错误转换为可选值 ...
- The Secant Method(正割法、弦截法) 附C语言代码
弦截法是一种求方程根的基该方法,在计算机编程中经常使用. 他的思路是这种:任取两个数x1.x2,求得相应的函数值f(x1).f(x2).假设两函数值同号,则又一次取数.直到这两个函数值异号为止. 连接 ...
- View载入具体解释
文章一開始我要对前面一篇文章做点补充 相信大家都知道View有两个方法. public boolean post(Runnable action) public boolean postDelayed ...
- Linux下一款可以使用命令行的pdf阅读器
Zathura是linux下一款用命令行控制打pdf阅读器,并且基本打使用方法和vim很相似.对于喜欢键盘操作的用户来说的确是一个不错的选择. ubuntu下的安装命令: sudo apt-get i ...
- 桌面系统集成WEB认证系统方案
最近做的一个项目,有WEB版.WPF版.手机版.领导想集成集团的一个现成的认证系统,姑且称这个认证系统名为 W4认证系统. W4认证系统有如下特点: 1.现成的 2.是个单点登录系统 3.不支持oAu ...
- YES,IT IS