使用js拖拽盒子移动（）

使用js拖拽盒子移动

所用到的方法有onmousemove , onmouseup , onmousedown

按下鼠标开始拖拽，松下及停止
此方法用函数实现


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>鼠标事件</title><style type="text/css">#box{width: 100px;height: 100px;background-color: aqua;position: absolute;}#box1{width: 100px;height: 100px;background-color: #000000;position: absolute;left: 300px;top: 300px;}</style><script type="text/javascript">window.onload = function(){function drag(obj){obj.onmousedown = function(event){var al = event.clientX - obj.offsetLeft;//求出鼠标到盒子距离  左var at = event.clientY - obj.offsetTop;//求出鼠标到盒子距离   上document.onmousemove = function(event){event = event || window.event;var left = event.clientX;var top = event.clientY;obj.style.left = left - al + "px";obj.style.top = top -at + "px";}document.onmouseup = function(){document.onmousemove = null; //取消onmousemove 取消移动document.onmouseup = null;//取消这个onmouseup}return false; //是为了去除浏览器的一些默认行为但IE8不支持                       }}var box = document.getElementById("box");var box1 = document.getElementById("box1");drag(box1);drag(box);}</script></head><body><div id="box"></div><div id="box1"></div></body>
</html>

这个方法是在页面中没有滚动条中实现的
如果页面过长可以参考这个方法会有些问题可以参考上一篇解决点击进入

使用js拖拽盒子移动（）相关推荐

html点击控制盒子左右移动,JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例...
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例发布时间:2020-10-04 12:47:25 来源:脚本之家阅读:121 作者:s_psycho 本文实例讲述了JS实现鼠标拖拽盒子移动及右键 ...
vue项目通过directives指令实现vue实现盒子的移动；vue拖拽盒子；vue移动；
vue项目:点击拖拽盒子:移动盒子: 代码可直接复制:(注意需要在移动的盒子上添加 v-指令注意采用固定定位) <template><div class="far_box ...
js 拖拽元素鼠标速度过快元素跟不上
自己写一个拖拽元素,使用js拖拽元素时,鼠标速度过快时元素跟不上鼠标参考了网上的文章 ,里面对比了绑定到 body和document上的不同点js 拖拽元素鼠标速度过快问题明白过来是因为速度过 ...
sortable 拖拽时互换目标的位置_双端通用型JS拖拽插件的封装与应用
最近工作中遇到一个需求,需要将一个元素从某位置拖动到另一固定位置后执行某一交互行为,具体效果如下: 这个看似简单的需求,然而实现起来却并不那么顺利.我首先想到的是如何通过哪个现有的插件来快速解决这个问 ...
php拖拽原理,JS拖拽效果及原理解析
这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. ...
html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好 ...
解决JS拖拽出现的问题
解决JS拖拽出现的问题参考文章: (1)解决JS拖拽出现的问题 (2)https://www.cnblogs.com/yuanjingjing/p/10154198.html 备忘一下.
vue.js 拖拽排序_快速轻巧的Vue.js拖放可排序库
vue.js 拖拽排序 vue-smooth-dnd (vue-smooth-dnd) A fast and lightweight drag&drop, sortable library f ...
js拖拽图片到浏览器上传
拖拽的事件有很多,这个懂的都懂不懂的就- <!doctype html> <html> <head> <meta charset="utf-8&qu ...

使用js拖拽盒子移动（）

使用js拖拽盒子移动

使用js拖拽盒子移动（）相关推荐

最新文章

热门文章