博客
关于我
js实现可拖拽的div
阅读量:612 次
发布时间:2019-03-13

本文共 2543 字,大约阅读时间需要 8 分钟。

HTML拖拽元素实现

下午忙里偷闲想写一个可拖拽的例子,脑海里一直都是三个事件mouseDown,mouseUp,mouseMove,但从未动手实践过。今天终于动手实践,并学习了张鑫旭的demo实现。学习张鑫旭代码的同时,也了解了几点知识点。

获取DOM非行间样式

通过对currentStyle和getComputedStyle的研究,我了解到获取DOM非行间样式有两种方法:obj.currentStyle[attr]和getComputedStyle(obj,false)[attr]。经过百度,发现Chrome和FF不支持currentStyle,因此选择了这两种方法来兼容不同浏览器。

防止内容被选中

在实现onselectstart事件时,发现IE和Chrome默认会阻止内容被选中。为了让拖拽更流畅,我设置onselectstart的返回值为false。

拖拽原理

可拖拽的div元素主要依赖于mouseDown、mouseMove和mouseUp三个事件。首先是确定mouseDown事件发生时的DOM承载对象,以及mouseMove时的坐标计算。其次是当拖拽完成时的DOM承载对象,我选择了document作为承载对象。这个选择是否正确,需要根据实际需求来决定。

拖拽效果图

拖拽后可以看到div元素沿着鼠标移动的方向改变位置。这一效果通过在mouseMove事件中更新target的left和top属性来实现。

JavaScript实现

以下是实现可拖拽效果的JavaScript代码:

/** 拖拽div
* 关键事件:mouseDown, mouseMove,mouseUp
*/
var params = {
top: 0,
left: 0,
currentX: 0,
currentY: 0,
flag: false
};
/** obj.currentStyle[attr] || getComputedStyle(obj,false)[attr] 获取DOM非行间样式 */
var getCss = function(o, key) {
return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
};
var startDrag = function(bar, target, callback) {
if (getCss(target, 'left') !== 'auto') {
params.left = getCss(target, 'left');
}
if (getCss(target, 'top') !== 'auto') {
params.top = getCss(target, 'top');
}
bar.onmousedown = function(event) {
params.flag = true;
if (!event) {
event = window.event;
bar.onselectstart = function() {
// IE和Chrome适用,防止内容被选中默认是true
return false;
}
}
var e = event;
params.currentX = e.clientX;
params.currentY = e.clientY;
};
document.onmouseup = function() {
params.flag = false;
if (getCss(target, "left") !== 'auto') {
params.left = getCss(target, 'left');
}
if (getCss(target, 'top') !== 'auto') {
params.top = getCss(target, 'top');
}
};
document.onmousemove = function(event) {
var e = event ? event : window.event;
if (params.flag) {
var nowX = e.clientX,
nowY = e.clientY;
var disX = nowX - params.currentX,
disY = nowY - params.currentY;
target.style.left = params.left + disX + 'px';
target.style.top = params.top + disY + 'px';
}
if (callback === 'function') {
callback(params.left + disX, params.top + disY);
}
};
};

总结

通过以上方法,可以轻松实现一个可拖拽的div元素。整个实现过程主要包括获取非行间样式、防止内容被选中以及处理拖拽事件。虽然过程中遇到了一些小问题,但通过查阅资料和不断尝试,最终达成了预期效果。

转载地址:http://stbaz.baihongyu.com/

你可能感兴趣的文章
Nginx gateway集群和动态网关
查看>>
Nginx Location配置总结
查看>>
Nginx log文件写入失败?log文件权限设置问题
查看>>
Nginx Lua install
查看>>
nginx net::ERR_ABORTED 403 (Forbidden)
查看>>
Nginx SSL私有证书自签,且反代80端口
查看>>
Nginx upstream性能优化
查看>>
Nginx 中解决跨域问题
查看>>
nginx 代理解决跨域
查看>>
Nginx 动静分离与负载均衡的实现
查看>>
Nginx 反向代理 MinIO 及 ruoyi-vue-pro 配置 MinIO 详解
查看>>
nginx 反向代理 转发请求时,有时好有时没反应,产生原因及解决
查看>>
Nginx 反向代理解决跨域问题
查看>>
Nginx 反向代理配置去除前缀
查看>>
nginx 后端获取真实ip
查看>>
Nginx 多端口配置和访问异常问题的排查与优化
查看>>
Nginx 如何代理转发传递真实 ip 地址?
查看>>
Nginx 学习总结(16)—— 动静分离、压缩、缓存、黑白名单、性能等内容温习
查看>>
Nginx 学习总结(17)—— 8 个免费开源 Nginx 管理系统,轻松管理 Nginx 站点配置
查看>>
Nginx 学习(一):Nginx 下载和启动
查看>>