首页 > 代码库 > 一个JavaScript自由拖拽类介绍

一个JavaScript自由拖拽类介绍

2024-07-23 13:00:43   211人阅读

基本拖拽：

1new Dragdrop({
2    target 拖拽元素 HTMLElemnt 必选
3    bridge   指定鼠标按下哪个元素时开始拖拽，实现模态对话框时用到
4    dragable 是否可拖拽   (true)默认
5    dragX true/false false水平方向不可拖拽 (true)默认
6    dragY    true/false false垂直方向不可拖拽 (true)默认
7    area [minX,maxX,minY,maxY] 指定拖拽范围 默认任意拖动
8    callback 拖拽过程中的回调函数
9});

拖拽最有技术含量的就是这段了：伯爵娱乐城

1if(el.setCapture){ //IE
2    E.on(el, "losecapture", mouseup);
3    el.setCapture();
4    e.cancelBubble = true;
5}else if(window.captureEvents){ //标准DOM
6    e.stopPropagation();
7    E.on(window, "blur", mouseup);
8    e.preventDefault();
9}

这个效果没有使用JQuery，纯原生JavaScript实现，可以参考下。拖动效果平滑，自然，CPU性能没有明显起伏。

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

一个JavaScript自由拖拽类介绍


联系
我们