js可以随意拖拽的div的实现

Posted tisikcci

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js可以随意拖拽的div的实现相关的知识，希望对你有一定的参考价值。

最近花了点时间用纯JS写了一个扫雷程序，写出来效果很差，自己长时间使用面向过程的方式编写代码，写的程序到后面都乱了，有必要找时间好好的深入理解一下OOP了。有时间会把写的东西拿上来。就当是留个纪念吧。打算用OOP重新写个扫雷程序，希望令自己满意。

——————————————碎碎念

记录一个实现随意拖拽div的实现方法，当作备忘吧，指不定什么时候用到了呢。

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>divDrag</title>
　　　　<style>
　　　　　　#div1{
　　　　　　　　width: 300px;
　　　　　　　　height: 300px;
　　　　　　　　background-color: #ccc;
　　　　　　　　/*一定要绝对定位*/
　　　　　　　　position: absolute;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div id="div1"></div>
　　　　<script src="drag.js"></script>
　　</body>
</html>

 

*********************************************

//面向过程式写法

window.onload = function(){
　　var div1 = document.getElementById("div1");
　　div1.onmousedown = function(ev){
　　　　var oevent = ev || event;

　　　　var distanceX = oevent.clientX - div1.offsetLeft;
　　　　var distanceY = oevent.clientY - div1.offsetTop;

　　　　document.onmousemove = function(ev){
　　　　　　var oevent = ev || event;
　　　　　　div1.style.left = oevent.clientX - distanceX + ‘px‘;
　　　　　　div1.style.top = oevent.clientY - distanceY + ‘px‘; 
　　　　};
　　　　document.onmouseup = function(){
　　　　　　document.onmousemove = null;
　　　　　　document.onmouseup = null;
　　　　};
　　;
};

//所谓的面向对象实现（这就是面向对象吗？感觉逻辑上也不咋的呀）

稍后更新....

以上是关于js可以随意拖拽的div的实现的主要内容，如果未能解决你的问题，请参考以下文章

纯js实现DIV拖拽

vue实现的随意拖拽的自定义表单，用于医院文书开发，提高实施效率

vue实现的随意拖拽的自定义表单，用于医院文书开发，提高实施效率

原生JS实现图标图片拖拽

js 实现拖拽元素

编写可拖拽的弹窗