用原生JavaScript做一个拖拽效果
2012-02-07 00:00
489 查看
window.onload = function(){
var container = document.getElementById('container');
var ele = document.getElementById('d1');
var bodyWidth = container.offsetWidth,
bodyHeight = container.offsetHeight;
var maxX = bodyWidth - ele.offsetWidth - 10;
var maxY = bodyHeight - ele.offsetHeight - 10;
var dd = new Dragdrop({
target : ele,
area : [0,maxX,0,maxY],
callback : function(obj){
if(typeof obj.moveX == 'number' && this.dragX){
document.getElementById('x').innerHTML = 'x:'+obj.moveX;
}
if(typeof obj.moveY == 'number' && this.dragY){
document.getElementById('y').innerHTML = 'y:'+obj.moveY;
}
}
});
document.getElementById('setting').onclick = function(e){
e = e || event;
var target = e.target || e.srcElement;
if(target.value == '1' && target.checked){
dd.dragAll();
}
if(target.value == '2' && target.checked){
dd.dragX();
}
if(target.value == '3' && target.checked){
dd.dragY();
}
if(target.value == '4' && target.checked){
dd.setDragable(false);
}
if(target.value == '5' && target.checked){
dd.setDragable(true);
}
if(target.value == '6' && target.checked){
dd.reStore();
document.getElementById('x').innerHTML = 'x:0';
document.getElementById('y').innerHTML = 'y:0';
}
}
}
Drag me.
任意方向
水平方向
垂直方向
停止拖拽
开启拖拽
恢复初始状态
基本拖拽:
拖拽最有技术含量的就是这段了:
这个效果没有使用JQuery,纯原生JavaScript实现,可以参考下。拖动效果平滑,自然,CPU性能没有明显起伏。
具体的拖拽了可以查看本页源代码获得,这里就不贴出来了。
/**
*
* 基本拖拽
* new Dragdrop({
* target 拖拽元素 HTMLElemnt 必选
* bridge 指定鼠标按下哪个元素时开始拖拽,实现模态对话框时用到
* dragable 是否可拖拽 (true)默认
* dragX true/false false水平方向不可拖拽 (true)默认
* dragY true/false false垂直方向不可拖拽 (true)默认
* area [minX,maxX,minY,maxY] 指定拖拽范围 默认任意拖动
* callback 移动过程中的回调函数
* });
*
* demo
* dragdrop_0.6.html
*/
Dragdrop = function(window){
var doc = window.document;
var E = {
on : function(el, type, fn){
el.addEventListener ?
el.addEventListener(type, fn, false) :
el.attachEvent ?
el.attachEvent("on" + type, fn) :
el['on'+type] = fn;
},
un : function(el,type,fn){
el.removeEventListener ?
el.removeEventListener(type, fn, false) :
el.detachEvent ?
el.detachEvent("on" + type, fn) :
el['on'+type] = null;
},
evt : function(e){
return e || window.event;
}
};
return function(opt){
var conf = null, defaultConf, diffX, diffY;
function Config(opt){
this.target = opt.target;
this.bridge = opt.bridge;
this.dragable = opt.dragable != false;
this.dragX = opt.dragX != false;
this.dragY = opt.dragY != false;
this.area = opt.area;
this.callback = opt.callback;
}
function Dragdrop(opt){
if(!opt){return;}
conf = new Config(opt);
defaultConf = new Config(opt);
conf.bridge ?
E.on(conf.bridge,'mousedown',mousedown) :
E.on(conf.target,'mousedown',mousedown);
}
Dragdrop.prototype = {
dragX : function(){
conf.dragX = true;
conf.dragY = false;
},
dragY : function(b){
conf.dragY = true;
conf.dragX = false;
},
dragAll : function(){
conf.dragX = true;
conf.dragY = true;
},
setArea : function(a){
conf.area = a;
},
setBridge : function(b){
conf.bridge = b;
},
setDragable : function(b){
conf.dragable = b;
},
reStore : function(){
conf = new Config(defaultConf);
conf.target.style.top = '0px';
conf.target.style.left = '0px';
},
getDragX : function(){
return conf.dragX;
},
getDragY : function(){
return conf.dragY;
}
}
function mousedown(e){
e = E.evt(e);
var el = conf.target;
el.style.position = 'absolute';
el.style.cursor = 'move';if(el.setCapture){ //IE E.on(el, "losecapture", mouseup); el.setCapture(); e.cancelBubble = true; }else if(window.captureEvents){ //标准DOM e.stopPropagation(); E.on(window, "blur", mouseup); e.preventDefault(); } diffX = e.clientX - el.offsetLeft;
diffY = e.clientY - el.offsetTop;
E.on(doc,'mousemove',mousemove);
E.on(doc,'mouseup',mouseup);
}
function mousemove(e){
var el = conf.target, e = E.evt(e), moveX = e.clientX - diffX, moveY = e.clientY - diffY;
var minX, maxX, minY, maxY;
if(conf.area){
minX = conf.area[0];
maxX = conf.area[1];
minY = conf.area[2];
maxY = conf.area[3];
moveX < minX && (moveX = minX); // left 最小值
moveX > maxX && (moveX = maxX); // left 最大值
moveY < minY && (moveY = minY); // top 最小值
moveY > maxY && (moveY = maxY); // top 最大值
}
if(conf.dragable){
conf.dragX && (el.style.left = moveX + 'px');
conf.dragY && (el.style.top = moveY + 'px');
if(conf.callback){
var obj = {moveX:moveX,moveY:moveY};
conf.callback.call(conf,obj);
}
}
}
function mouseup(e){
var el = conf.target;
el.style.cursor = 'default';
E.un(doc,'mousemove',mousemove);
E.un(doc,'mouseup',mouseup);
if(el.releaseCapture){ //IE
E.un(el, "losecapture", mouseup);
el.releaseCapture();
}
if(window.releaseEvents){ //标准DOM
E.un(window, "blur", mouseup);
}
}
return new Dragdrop(opt);
}
}(this);
var container = document.getElementById('container');
var ele = document.getElementById('d1');
var bodyWidth = container.offsetWidth,
bodyHeight = container.offsetHeight;
var maxX = bodyWidth - ele.offsetWidth - 10;
var maxY = bodyHeight - ele.offsetHeight - 10;
var dd = new Dragdrop({
target : ele,
area : [0,maxX,0,maxY],
callback : function(obj){
if(typeof obj.moveX == 'number' && this.dragX){
document.getElementById('x').innerHTML = 'x:'+obj.moveX;
}
if(typeof obj.moveY == 'number' && this.dragY){
document.getElementById('y').innerHTML = 'y:'+obj.moveY;
}
}
});
document.getElementById('setting').onclick = function(e){
e = e || event;
var target = e.target || e.srcElement;
if(target.value == '1' && target.checked){
dd.dragAll();
}
if(target.value == '2' && target.checked){
dd.dragX();
}
if(target.value == '3' && target.checked){
dd.dragY();
}
if(target.value == '4' && target.checked){
dd.setDragable(false);
}
if(target.value == '5' && target.checked){
dd.setDragable(true);
}
if(target.value == '6' && target.checked){
dd.reStore();
document.getElementById('x').innerHTML = 'x:0';
document.getElementById('y').innerHTML = 'y:0';
}
}
}
效果演示
拖拽状态:x:0, y:0Drag me.
任意方向
水平方向
垂直方向
停止拖拽
开启拖拽
恢复初始状态
基本拖拽:
new Dragdrop({ target 拖拽元素 HTMLElemnt 必选 bridge 指定鼠标按下哪个元素时开始拖拽,实现模态对话框时用到 dragable 是否可拖拽 (true)默认 dragX true/false false水平方向不可拖拽 (true)默认 dragY true/false false垂直方向不可拖拽 (true)默认 area [minX,maxX,minY,maxY] 指定拖拽范围 默认任意拖动 callback 拖拽过程中的回调函数 });
拖拽最有技术含量的就是这段了:
if(el.setCapture){ //IE E.on(el, "losecapture", mouseup); el.setCapture(); e.cancelBubble = true; }else if(window.captureEvents){ //标准DOM e.stopPropagation(); E.on(window, "blur", mouseup); e.preventDefault(); }
这个效果没有使用JQuery,纯原生JavaScript实现,可以参考下。拖动效果平滑,自然,CPU性能没有明显起伏。
具体的拖拽了可以查看本页源代码获得,这里就不贴出来了。
/**
*
* 基本拖拽
* new Dragdrop({
* target 拖拽元素 HTMLElemnt 必选
* bridge 指定鼠标按下哪个元素时开始拖拽,实现模态对话框时用到
* dragable 是否可拖拽 (true)默认
* dragX true/false false水平方向不可拖拽 (true)默认
* dragY true/false false垂直方向不可拖拽 (true)默认
* area [minX,maxX,minY,maxY] 指定拖拽范围 默认任意拖动
* callback 移动过程中的回调函数
* });
*
* demo
* dragdrop_0.6.html
*/
Dragdrop = function(window){
var doc = window.document;
var E = {
on : function(el, type, fn){
el.addEventListener ?
el.addEventListener(type, fn, false) :
el.attachEvent ?
el.attachEvent("on" + type, fn) :
el['on'+type] = fn;
},
un : function(el,type,fn){
el.removeEventListener ?
el.removeEventListener(type, fn, false) :
el.detachEvent ?
el.detachEvent("on" + type, fn) :
el['on'+type] = null;
},
evt : function(e){
return e || window.event;
}
};
return function(opt){
var conf = null, defaultConf, diffX, diffY;
function Config(opt){
this.target = opt.target;
this.bridge = opt.bridge;
this.dragable = opt.dragable != false;
this.dragX = opt.dragX != false;
this.dragY = opt.dragY != false;
this.area = opt.area;
this.callback = opt.callback;
}
function Dragdrop(opt){
if(!opt){return;}
conf = new Config(opt);
defaultConf = new Config(opt);
conf.bridge ?
E.on(conf.bridge,'mousedown',mousedown) :
E.on(conf.target,'mousedown',mousedown);
}
Dragdrop.prototype = {
dragX : function(){
conf.dragX = true;
conf.dragY = false;
},
dragY : function(b){
conf.dragY = true;
conf.dragX = false;
},
dragAll : function(){
conf.dragX = true;
conf.dragY = true;
},
setArea : function(a){
conf.area = a;
},
setBridge : function(b){
conf.bridge = b;
},
setDragable : function(b){
conf.dragable = b;
},
reStore : function(){
conf = new Config(defaultConf);
conf.target.style.top = '0px';
conf.target.style.left = '0px';
},
getDragX : function(){
return conf.dragX;
},
getDragY : function(){
return conf.dragY;
}
}
function mousedown(e){
e = E.evt(e);
var el = conf.target;
el.style.position = 'absolute';
el.style.cursor = 'move';if(el.setCapture){ //IE E.on(el, "losecapture", mouseup); el.setCapture(); e.cancelBubble = true; }else if(window.captureEvents){ //标准DOM e.stopPropagation(); E.on(window, "blur", mouseup); e.preventDefault(); } diffX = e.clientX - el.offsetLeft;
diffY = e.clientY - el.offsetTop;
E.on(doc,'mousemove',mousemove);
E.on(doc,'mouseup',mouseup);
}
function mousemove(e){
var el = conf.target, e = E.evt(e), moveX = e.clientX - diffX, moveY = e.clientY - diffY;
var minX, maxX, minY, maxY;
if(conf.area){
minX = conf.area[0];
maxX = conf.area[1];
minY = conf.area[2];
maxY = conf.area[3];
moveX < minX && (moveX = minX); // left 最小值
moveX > maxX && (moveX = maxX); // left 最大值
moveY < minY && (moveY = minY); // top 最小值
moveY > maxY && (moveY = maxY); // top 最大值
}
if(conf.dragable){
conf.dragX && (el.style.left = moveX + 'px');
conf.dragY && (el.style.top = moveY + 'px');
if(conf.callback){
var obj = {moveX:moveX,moveY:moveY};
conf.callback.call(conf,obj);
}
}
}
function mouseup(e){
var el = conf.target;
el.style.cursor = 'default';
E.un(doc,'mousemove',mousemove);
E.un(doc,'mouseup',mouseup);
if(el.releaseCapture){ //IE
E.un(el, "losecapture", mouseup);
el.releaseCapture();
}
if(window.releaseEvents){ //标准DOM
E.un(window, "blur", mouseup);
}
}
return new Dragdrop(opt);
}
}(this);
相关文章推荐
- 原生Javascript实现拖拽效果
- 原生JavaScript与jQuery(绝对、相对定位)实现拖拽效果
- 原生javascript实现的一个简单动画效果
- 分享一个用原生JavaScript写的带缓动效果的图片幻灯
- 原生javascript制作拖拽效果
- javascript原生封装一个淡入淡出效果的函数测试实例代码
- 分享一个用原生JavaScript写的带缓动效果的图片幻灯
- 原生js如何做一个链式运动,JavaScript怎么做鼠标跟随效果
- 超酷Javascript拖拽翻页效果,贴出核心代码(附DEMO)
- 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
- 检测一个函数是否是JavaScript原生函数的小技巧
- 基于jquery的一个拖拽到指定区域内的效果
- 原生JavaScript实现幻灯片效果
- javascript学习-原生javascript的小特效(简单的运动效果)
- React.js实现原生js拖拽效果及思考
- 用原生javascript写出jquery中slideUp和slideDown效果
- 超酷的鼠标拖拽翻页(分页)效果实现javascript代码
- 原生js实现可拖拽效果
- 如何写一个通用的JavaScript效果库
- JavaScript实现最简单的拖拽效果