效果演示
拖拽状态: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条评论, 我也要评论