web前端|js教程
JavaScript,鼠标,拖动
web前端-js教程
A、前言
最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.fn.draggable插件,在接触一些资料和别人的思路,今天终于把这个拖动功能给完善了,下面就来看看它的实现
B、设计思路
在拖动元素上绑定鼠标按下事件,在文档对象中绑定鼠标移动,鼠标弹起事件;
为什么不把三个事件都绑定在拖动元素上,这是因为鼠标移动太快时,鼠标移动和弹起事件处理程序将不会执行
进人系统源码,ubuntu怎么向上翻页,tomcat发布项目缺少部分,学习爬虫hadoop,php 进程间数据交互,https做seolzw
$target.bind(mousedown, fn);
$(document)
.bind(mousemove, fn)
.bind(mouseup, fn);
C、源码实现细节
在实现源码中有很多需要值得注意的地方:
1、首先在鼠标按下事件中,当单击拖动元素中,可能会选择区域文字,这并不是我们所需要的,解决方法如下:
ps壁纸源码,vscode语法配色,xhei ubuntu,tomcat路由重写,sqlite3怎么打印,淘宝插件开发,前端 框架设计与实现,梦见乌龟肚子里爬虫子,php 转换string,阳泉seo优化目的,手机网站模板尺寸,唯品会网页设计源码,免费模板有使用期限吗lzw
// 阻止区域文字被选中 for chrome firefox ie9
e.preventDefault();
// for firefox ie9 || less than ie9
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
2、如果拖动元素是图片(img标签),鼠标在拖动图片一小段距离,会出现一个禁止的小提示,即:图片不能再拖动,
这是浏览器的默认行为,因此只要阻止浏览器默认行为就可以了
农业电子商务源码,树莓派ubuntu镜像,解决反爬虫方案,php gzip 扩展,seo老板格局lzw
e.preventDefault();
3、关于边界(处理拖动范围)的问题
一开始实现的代码如下:
// x,y代表拖动元素将要设置的left,top值,limitObj为拖动区域范围对象,测试时就发现问题,
// 在拖动过程中,拖动对象有时不能直接靠近边界
if ( x >= limitObj._left && x <= limitObj._right ) {
$target.css({ left: x + px });
}
if ( y >= limitObj._top && y <= limitObj._bottom ) {
$target.css({ top: y + px });
}
进一步思考:为什么会出现上面问题,原因在于变量x可能会小于limitObj._left或大于limitObj._right,变量y同理,
因此代码需要像下面这样处理:
if (x < limitObj._left) {
x = limitObj._left;
}
if (x > limitObj._right) {
x = limitObj._right;
}
if (y < limitObj._top) {
y = limitObj._top;
}
if (y > limitObj._bottom) {
y = limitObj._bottom;
}
$target.css({ left: x + px, top: y + px });
终于解决了这个问题,但是cloudgamer给出了更好的写法:
$target.css({
left: Math.max( Math.min(x, limitObj._right), limitObj._left) + px,
top: Math.max( Math.min(y, limitObj._bottom), limitObj._top) + px
});
完整程序源码:
$.fn.extend({
/**
* Autor: 博客园华子yjh /02/21
*/
drag: function(options) {
var dragStart, dragMove, dragEnd,
$boundaryElem, limitObj;
function _initOptions() {
var noop = function(){}, defaultOptions;
defaultOptions = { // 默认配置项
boundaryElem: ody // 边界容器
};
options = $.extend( defaultOptions, options || {} );
$boundaryElem = $(options.boundaryElem);
dragStart = options.dragStart || noop,
dragMove = options.dragMove || noop,
dragEnd = options.dragEnd || noop;
}
function _drag(e) {
var clientX, clientY, offsetLeft, offsetTop,
$target = $(this), self = this;
limitObj = {
_left: 0,
_top: 0,
_right: ($boundaryElem.innerWidth() || $(window).width()) - $target.outerWidth(),
_bottom: ($boundaryElem.innerHeight() || $(window).height()) - $target.outerHeight()
};
// 记录鼠标按下时的位置及拖动元素的相对位置
clientX = e.clientX;
clientY = e.clientY;
offsetLeft = this.offsetLeft;
offsetTop = this.offsetTop;
dragStart.apply(this, arguments);
$(document).bind(mousemove, moveHandle)
.bind(mouseup, upHandle);
// 鼠标移动事件处理
function moveHandle(e) {
var x = e.clientX - clientX + offsetLeft;
var y = e.clientY - clientY + offsetTop;
$target.css({
left: Math.max( Math.min(x, limitObj._right), limitObj._left) + px,
top: Math.max( Math.min(y, limitObj._bottom), limitObj._top) + px
});
dragMove.apply(self, arguments);
// 阻止浏览器默认行为(鼠标在拖动图片一小段距离,会出现一个禁止的小提示,即:图片不能再拖动)
e.preventDefault();
}
// 鼠标弹起事件处理
function upHandle(e) {
$(document).unbind(mousemove, moveHandle);
dragEnd.apply(self, arguments);
}
}
_initOptions(); // 初始化配置对象
$(this)
.css({ position: absolute })
.each(function(){
$(this).bind(mousedown, function(e){
_drag.apply(this, [e]);
// 阻止区域文字被选中 for chrome firefox ie9
e.preventDefault();
// for firefox ie9 || less than ie9
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
});
});
return this;
}
});
实例调用:
// 调用实例
(function(){
$(.drag-elem).drag({
boundaryElem: #boundary,
dragStart: function(){
$(this).html(准备拖动).css({ zIndex: 2 }).siblings().css({ zIndex: 1 });
},
dragMove: function(){
var pos = $(this).position();
$(this).html(拖动中( + pos.left + , + pos.top + ) );
},
dragEnd : function(){
$(this).html(拖动结束);
}
});
}());