聚合国内IT技术精华文章,分享IT技术精华,帮助IT从业人士成长

用原生JavaScript做一个拖拽效果

2011-07-26 00:00 浏览: 1063400 次 我要评论(0 条) 字号:


效果演示

拖拽状态:x:0, y:0
Drag 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性能没有明显起伏。

具体的拖拽了可以查看本页源代码获得,这里就不贴出来了。



网友评论已有0条评论, 我也要评论

发表评论

*

* (保密)

Ctrl+Enter 快捷回复