前言

使用$.fn.draggable.defaults重写默认值对象。下载该插件翻译源码

源码

/**
* jQuery EasyUI 1.3.2
*
*翻译:qq 1364386878 --拖动
*/
(function ($) {
var dragging = false;
function drag(e) {
var target = $.data(e.data.target, "draggable");
var options = target.options;
var proxy = target.proxy;
var dragData = e.data;
var left = dragData.startLeft + e.pageX - dragData.startX;
var top = dragData.startTop + e.pageY - dragData.startY;
if (proxy) {
if (proxy.parent()[0] == document.body) {
if (options.deltaX != null && options.deltaX != undefined) {
left = e.pageX + options.deltaX;
} else {
left = e.pageX - e.data.offsetWidth;
}
if (options.deltaY != null && options.deltaY != undefined) {
top = e.pageY + options.deltaY;
} else {
top = e.pageY - e.data.offsetHeight;
}
} else {
if (options.deltaX != null && options.deltaX != undefined) {
left += e.data.offsetWidth + options.deltaX;
}
if (options.deltaY != null && options.deltaY != undefined) {
top += e.data.offsetHeight + options.deltaY;
}
}
}
if (e.data.parent != document.body) {
left += $(e.data.parent).scrollLeft();
top += $(e.data.parent).scrollTop();
}
if (options.axis == "h") {//拖动方向
dragData.left = left;
} else {
if (options.axis == "v") {
dragData.top = top;
} else {
dragData.left = left;
dragData.top = top;
}
}
}; function applyDrag(e) {
var Drag = $.data(e.data.target, "draggable");
var options = Drag.options;
var proxy = Drag.proxy;
if (!proxy) {
proxy = $(e.data.target);
}
proxy.css({ left: e.data.left, top: e.data.top });
$("body").css("cursor", options.cursor);
}; function doDown(e) {
dragging = true;
var Drag = $.data(e.data.target, "draggable");
var options = Drag.options;
var droppables = $(".droppable").filter(function () {
return e.data.target != this;
}).filter(function () {
var accept = $.data(this, "droppable").options.accept;
if (accept) {
return $(accept).filter(function () {
return this == e.data.target;
}).length > 0;
} else {
return true;
}
});
Drag.droppables = droppables;
var proxy = Drag.proxy;
if (!proxy) {
if (options.proxy) {
if (options.proxy == "clone") {
proxy = $(e.data.target).clone().insertAfter(e.data.target);
} else {
proxy = options.proxy.call(e.data.target, e.data.target);
}
Drag.proxy = proxy;
} else {
proxy = $(e.data.target);
}
}
proxy.css("position", "absolute");
drag(e);
applyDrag(e);
options.onStartDrag.call(e.data.target, e);
return false;
}; function doMove(e) {
var Dtarget = $.data(e.data.target, "draggable");
drag(e);
if (Dtarget.options.onDrag.call(e.data.target, e) != false) {
applyDrag(e);
}
var source = e.data.target;
Dtarget.droppables.each(function () {
var dropObj = $(this);
if (dropObj.droppable("options").disabled) {
return;
}
var p2 = dropObj.offset();
if (e.pageX > p2.left && e.pageX < p2.left + dropObj.outerWidth() && e.pageY > p2.top && e.pageY < p2.top + dropObj.outerHeight()) {
if (!this.entered) {
$(this).trigger("_dragenter", [source]);
this.entered = true;
}
$(this).trigger("_dragover", [source]);
} else {
if (this.entered) {
$(this).trigger("_dragleave", [source]);
this.entered = false;
}
}
});
return false;
}; function doUp(e) {
dragging = false;
doMove(e);
var DragObj = $.data(e.data.target, "draggable");
var proxy = DragObj.proxy;
var options = DragObj.options;
if (options.revert) {
if (checkDrop() == true) {
$(e.data.target).css({ position: e.data.startPosition, left: e.data.startLeft, top: e.data.startTop });
} else {
if (proxy) {
var left, top;
if (proxy.parent()[0] == document.body) {
left = e.data.startX - e.data.offsetWidth;
top = e.data.startY - e.data.offsetHeight;
} else {
left = e.data.startLeft;
top = e.data.startTop;
}
proxy.animate({ left: left, top: top }, function () {
removeProxy();
});
} else {
$(e.data.target).animate({ left: e.data.startLeft, top: e.data.startTop }, function () {
$(e.data.target).css("position", e.data.startPosition);
});
}
}
} else {
$(e.data.target).css({ position: "absolute", left: e.data.left, top: e.data.top });
checkDrop();
}
options.onStopDrag.call(e.data.target, e);
$(document).unbind(".draggable");
setTimeout(function () {
$("body").css("cursor", "");
}, 100);
function removeProxy() {
if (proxy) {
proxy.remove();
}
DragObj.proxy = null;
};
function checkDrop() {
var dropped = false;
DragObj.droppables.each(function () {
var dropObj = $(this);
if (dropObj.droppable("options").disabled) {
return;
}
var p2 = dropObj.offset();
if (e.pageX > p2.left && e.pageX < p2.left + dropObj.outerWidth() && e.pageY > p2.top && e.pageY < p2.top + dropObj.outerHeight()) {
if (options.revert) {
$(e.data.target).css({ position: e.data.startPosition, left: e.data.startLeft, top: e.data.startTop });
}
removeProxy();
$(this).trigger("_drop", [e.data.target]);
dropped = true;
this.entered = false;
return false;
}
});
if (!dropped && !options.revert) {
removeProxy();
}
return dropped;
};
return false;
};
//实例化插件
$.fn.draggable = function (options, param) {
if (typeof options == "string") {
return $.fn.draggable.methods[options](this, param);
}
return this.each(function () {
var options;
var target = $.data(this, "draggable");
if (target) {
target.handle.unbind(".draggable");
options = $.extend(target.options, options);
} else {
options = $.extend({}, $.fn.draggable.defaults, $.fn.draggable.parseOptions(this), options || {});
}
if (options.disabled == true) {
$(this).css("cursor", "");
return;
}
var handle = null;
if (typeof options.handle == "undefined" || options.handle == null) {
handle = $(this);
} else {
handle = (typeof options.handle == "string" ? $(options.handle, this) : options.handle);
}
$.data(this, "draggable", { options: options, handle: handle });
handle.unbind(".draggable").bind("mousemove.draggable", { target: this }, function (e) {
if (dragging) {
return;
}
var options = $.data(e.data.target, "draggable").options;
if (checkArea(e)) {
$(this).css("cursor", options.cursor);
} else {
$(this).css("cursor", "");
}
}).bind("mouseleave.draggable", { target: this }, function (e) {
$(this).css("cursor", "");
}).bind("mousedown.draggable", { target: this }, function (e) {
if (checkArea(e) == false) {
return;
}
$(this).css("cursor", "");
var position = $(e.data.target).position();
var offset = $(e.data.target).offset();
var data = {
startPosition: $(e.data.target).css("position"),
startLeft: position.left, startTop: position.top,
left: position.left,
top: position.top,
startX: e.pageX,
startY: e.pageY,
offsetWidth: (e.pageX - offset.left),
offsetHeight: (e.pageY - offset.top),
target: e.data.target,
parent: $(e.data.target).parent()[0]
};
$.extend(e.data, data);
var options = $.data(e.data.target, "draggable").options;
if (options.onBeforeDrag.call(e.data.target, e) == false) {
return;
}
$(document).bind("mousedown.draggable", e.data, doDown);
$(document).bind("mousemove.draggable", e.data, doMove);
$(document).bind("mouseup.draggable", e.data, doUp);
});
function checkArea(e) {
var dropObj = $.data(e.data.target, "draggable");
var handle = dropObj.handle;
var offset = $(handle).offset();
var left = $(handle).outerWidth();
var top = $(handle).outerHeight();
var t = e.pageY - offset.top;
var r = offset.left + left - e.pageX;
var b = offset.top + top - e.pageY;
var l = e.pageX - offset.left;
return Math.min(t, r, b, l) > dropObj.options.edge;
};
});
};
//拖动默认的方法
$.fn.draggable.methods = {
//返回属性对象
options: function (jq) {
return $.data(jq[0], "draggable").options;
},
//如果代理属性被设置则返回该拖动代理元素
proxy: function (jq) {
return $.data(jq[0], "draggable").proxy;
},
//允许拖动
enable: function (jq) {
return jq.each(function () {
$(this).draggable({ disabled: false });
});
},
//禁止拖动
disable: function (jq) {
return jq.each(function () {
$(this).draggable({ disabled: true });
});
}
};
//属性转换器
$.fn.draggable.parseOptions = function (target) {
var t = $(target);
return $.extend({}, $.parser.parseOptions(target, ["cursor", "handle", "axis", { "revert": "boolean", "deltaX": "number", "deltaY": "number", "edge": "number" }]), { disabled: (t.attr("disabled") ? true : undefined) });
};
//拖动默认配置--属性 事件
$.fn.draggable.defaults = {
proxy: null,//在拖动的时候使用的代理元素,当使用'clone'的时候,将使用该元素的一个复制元素来作为替代元素。如果指定了一个函数,它将返回一个jquery对象
revert: false,//如果设置为true,在拖动停止时元素将返回起始位置
cursor: "move",//拖动时的CSS指针样式
deltaX: null,//被拖动的元素对应于当前光标位置x
deltaY: null,//被拖动的元素对应于当前光标位置y
handle: null,//开始拖动的句柄
disabled: false,//如果设置为true,则停止拖动
edge: 0,//可以在其中拖动的容器的宽度
axis: null,//定义元素移动的轴向,可用值有:'v'或'h',当没有设置或设置为null时可同时在水平和垂直方向上拖动
//在拖动之前触发,返回false将取消拖动
onBeforeDrag: function (e) {
},
//在目标对象开始被拖动时触发
onStartDrag: function (e) {
},
//在拖动过程中触发,当不能再拖动时返回false
onDrag: function (e) {
},
//在拖动停止时触发
onStopDrag: function (e) {
}
};
})(jQuery);

示例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Draggable - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script src="../../plugins2/jquery.parser.js"></script>
<script src="../../plugins2/jquery.draggable.js"></script>
</head>
<body>
<h2>Basic Draggable</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Move the boxes below by clicking on it with mouse.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-draggable" style="width:200px;height:150px;background:#fafafa;border:1px solid #ccc"></div>
<div class="easyui-draggable" data-options="handle:'#title'" style="width:200px;height:150px;background:#fafafa;border:1px solid #ccc;margin-top:10px">
<div id="title" style="padding:5px;background:#ccc;color:#fff">Title</div>
</div>
</body>
</html>

插件效果

easyui源码翻译1.32--Draggable(拖动)的更多相关文章

  1. easyui源码翻译1.32+API翻译全篇导航 (提供下载源码)

    前言 EasyUI每个组件都会有 属性.方法.事件 属性 所有的属性都定义在jQuery.fn.{plugin}.defaults里面.例如,对话框属性定义在jQuery.fn.dialog.defa ...

  2. easyui源码翻译1.32--datagrid(数据表格)

    前言 此前网上有easyui1.25的源码  应该算是比较老的版本  之后又经历了1.26 . 1.3. 1.31. 1.32 .1.33.1.34  1.33开始支持css3 算是又一个转折  但是 ...

  3. easyui源码翻译1.32--Resizable(调整大小)

    前言 使用$.fn.resizable.defaults重写默认值对象 下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:qq 1364386878 Resiz ...

  4. easyui源码翻译1.32--Window(窗口)

    前言 扩展自$.fn.panel.defaults.使用$.fn.window.defaults重写默认值对象.下载该插件翻译源码 窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口.默认情况下,窗 ...

  5. easyui源码翻译1.32--Tree(树)

    前言 使用$.fn.tree.defaults重写默认值对象.下载该插件翻译源码 树控件在web页面中一个将分层数据以树形结构进行显示.它提供用户展开.折叠.拖拽.编辑和异步加载等功能. 源码 /** ...

  6. easyui源码翻译1.32--EasyLoader(简单加载)

    前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3. ...

  7. easyui源码翻译1.32--Droppable(放置)

    前言 使用$.fn.droppable.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:lbq --放置 拉伸 */ (fun ...

  8. easyui源码翻译1.32--ComboTree(树形下拉框)

    前言 扩展自$.fn.combo.defaults和$.fn.tree.defaults.使用$.fn.combotree.defaults重写默认值对象.下载该插件翻译源码 树形下拉框结合选择控件和 ...

  9. easyui源码翻译1.32--Slider(滑动条)

    前言 使用$.fn.slider.defaults重写默认值对象.下载该插件翻译源码 滑动条允许用户从一个有限的范围内选择一个数值.当滑块控件沿着轨道移动的时候,将会显示一个提示来表示当前值.用户可以 ...

随机推荐

  1. Android Drawable系列(1):自定义背景以及注意事项

    0. Shape自身属性 android:shape=["rectangle" | "oval" | "line" | "ring ...

  2. MongoDB下载安装

    MongoDB官方下载地址:http://www.mongodb.org/ 一.在Windows平台下的安装 1.下载MongoDB数据库 2.设置MongoDB程序存放目录 下载完数据库后,直接解压 ...

  3. while循环语句

    while(循环条件,返回布尔类型)            {                代码执行的操作,或者打印输出. } do  whilw循环 do            {         ...

  4. 几个动画demo

    一.点击扩散效果 这个效果没什么难度,主要是加深对核心动画的理解和使用,但是还是有几个想说明的地方.先看一下效果,具体内容代码里有注释. // // CircleButton.m // UITest ...

  5. [.Net MVC] 使用 log4net 日志框架

    项目:后台管理平台 意义:项目开发中提出增加日志功能,对关键的操作.程序运行中的错误信息进行记录,这对程序部署后的调试有很大意义. 注:本文只是对网上搜集的信息进行了整合,以备今后查询. 关键字:.N ...

  6. vmware以及schlumberger题解

    先是vmare的:具体的题目我就不描述了. 1. 贪吃的小明.直接数个数,统计个数,就可以完成.使用map,应该输入implement这一类,我认为很简单,但是我只过了33%. /* ID: y119 ...

  7. 使用struts2+hibernate的增、删、改、查构架简单的学生管理系统

    工程环境:MyEclipse8.5 其他配置:Hibernate框架+jtds链接数据库驱动+Sql2008数据库+MyEclipse serevr+JDK1.7 开发环境:Win7x64 这个项目用 ...

  8. 网络编程之UDP协议

    UDP协议 UDP(User Datagram Protocol)也就是用户数据报协议,是一种无连接的传输层协议,提供面向事务的简单不可靠信息传送服务,IETF RFC 768是UDP的正式规范. 提 ...

  9. Windows和Linux下查看Apache、MySQL、PHP版本

    # Windows查看Apache版本: 使用命令:httpd -v # Linux查看Apache版本: 使用命令:apachectl -v # Windows查看MySQL版本: 使用命令:mys ...

  10. iOS中数据库运用之前的准备-简单的数据库

    1.数据持久化 数据持久化是通过文件将数据存储在硬盘上 iOS下主要有四种数据持久化方式 属性列表 对象归档 SQLite数据库 CoreData 数据持久化对的对比 1.属性列表.对象归档适合小数据 ...