<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript实现元素拖动</title>
<style>
*{
margin: 0;
}
#app{
width: 100vw;
height: 100vh;
background: #9acfea;
position: relative;
}
#content{
width: 100px;
height: 100px;
position: fixed;
background: #ff6700;
border-radius: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<div id="content" data-type="0"></div>
</div>
<script type="text/javascript">
let content = document.getElementById("content");
window.onmousedown = function (ev) {
/*
* 获取当前鼠标左键位置元素
* */
let ele = document.elementFromPoint(ev.clientX,ev.clientY);
/*
* 如果该位置元素属性data-type值为1则将该元素设为选中态
* */
if (ev.buttons===1 && ele.dataset.type==="0"){
ele.dataset.selected = true;
if (ev.offsetX ===0 && ev.offsetY===0){
content.dataset.x = ev.layerX.toString();
content.dataset.y = ev.layerY.toString();
} else {
content.dataset.x = ev.offsetX.toString();
content.dataset.y = ev.offsetY.toString();
}
}
};
window.onmousemove = function (ev) {
/*
* 如果有选中态元素存在，移动选中态的元素
* */
if (content.dataset.selected === "true") {
let pad_x = parseInt(content.dataset.x);
let pad_y = parseInt(content.dataset.y);
let flag = ev.clientX>pad_x &&
ev.clientX<window.innerWidth+pad_x-100 &&
ev.clientY>pad_y &&
ev.clientY<window.innerHeight+pad_y-100;
if (flag){
content.style.marginLeft = (ev.clientX-pad_x)+'px';
content.style.marginTop = (ev.clientY-pad_y)+'px';
}
}
};
window.onmouseup = function (ev) {
/*
* 鼠标左键弹起后如果有选中态元素，将它设为未选中态
* */
if (content.dataset.selected = true) {
content.dataset.selected = false;
}
}
</script>
</body>
</html>JavaScript - 元素拖动
2019-05-06
832
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
JavaScript实现元素拖动
*{
margin: 0;
...
目录
相关文章
|
12天前
|
JavaScript
前端开发
程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素，但是它们之间有些细微的差别，稍不注意，就很容易弄错！
32
1
1
|
25天前
|
JavaScript
前端开发
开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法，JavaScript 可以实现丰富的网页交互效果，如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中，开发者可以根据具体的需求和场景，选择合适的 DOM 元素操作方法来实现所需的功能，为用户提供更加流畅和动态的网页体验。
51
4
4
|
2月前
|
移动开发
JavaScript
前端开发
|
3月前
|
存储
前端开发
JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素，以及JavaScript的鼠标事件处理，通过示例代码展示了这些基础知识点在实际开发中的应用。
44
2
2
|
2月前
|
JavaScript
|
2月前
|
JavaScript
前端开发
索引
|
3月前
|
JavaScript
前端开发
|
3月前
|
JavaScript
前端开发
|
3月前
|
JavaScript
前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果，包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
50
0
0
|
3月前
|
JavaScript
前端开发
热门文章
最新文章
1
【转】Javascript关键字和保留字
2
OC与JS互相调用
3
JavaScript 操作 Cookie
4
Node.js 中流操作实践
5
js数组遍历some,foreach,map,filter,every对比
6
05.javascript访问CSS
7
Next.js 创建项目到服务器部署（目录结构介绍、项目结构Demo、开发细节注意）
8
JavaScript右下角信息提示插件Notyf
9
javascript工厂模式和构造方法
10
如何让你的JavaScript代码更加语义化
1
深入理解JavaScript中的事件循环机制
85
2
【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
110
3
JavaScript 数组方法概览
37
4
在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
61
5
JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式
47
6
JavaScript 提供了多种方法来操作 DOM（文档对象模型）
47
7
JavaScript的垃圾回收机制通过标记-清除算法自动管理内存
57
8
JavaScript 的垃圾回收机制有一些潜在的缺点
41
9
nbcio-vue下载安装后运行报错，diagram-js没有安装
63
10
了解JavaScript的垃圾回收机制
39