JS实现右键拖动元素

最近做一个绘图的应用，需要用右键来拖动画布的父节点，网上的例子一般是左键拖动，我稍微改了一下，使用右键拖动，拖动前需要屏蔽右键触发上下文菜单：

//需要拖动的块
<div id = "Container" style="position: absolute;left: 100px;top: 100px; height: 1000px;width: 1400px;box-shadow:0px 0px 10px 5px #383838;">
</div>var drag = document.getElementById('Container');//屏蔽此对象的右键菜单drag.oncontextmenu = () => false;let putDown = function (event) {var event = event || window.event;if(event.button != 2){return;}drag.style.cursor = "move";let offsetX = parseInt(drag.style.left); // x轴距离let offsetY = parseInt(drag.style.top); // y轴距离let innerX = event.clientX - offsetX; // 鼠标x轴距let innerY = event.clientY - offsetY; // 鼠标y轴距// 移动时显示边框drag.style.borderStyle = "solid";drag.style.borderColor = "white";drag.style.borderWidth = "2px";document.onmousemove = function (event) {drag.style.left = event.clientX - innerX + "px";drag.style.top = event.clientY - innerY + "px";}document.onmouseup = function () {var event = event || window.event;if(event.button != 2){return;}document.onmousemove = null;document.onmouseup = null;drag.style.borderStyle = "";drag.style.borderColor = "";drag.style.borderWidth = "";drag.style.cursor = "auto";}}drag.addEventListener("mousedown", putDown, false);

JS实现右键拖动元素相关推荐

js拖拽之二：实现拖动元素上下左右改变元素大小
具体原理参考 js拖拽一 <script> var oDiv = document.getElementById("div1"); oDiv.onmousedown = ...
html元素拖动互换位置原理,【详】JS实现拖拽元素互换位置
写在前面的废话大家好,我是练习js时长接近两年半的个人练习生--李大雷算了,直接鸡,你太美~ 应用场景很多时候,我们需要让用户来自定义自己想要的菜单顺序,或者一些按钮的排序,那么这个时候,怎么 ...
防止html网页被f12抓取,JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码...
前言很多站长为了仿止别人仿制或扒下自己的网页,都会选择使用禁止浏览器右键查看元素或F12审查元素,一旦查看元素浏览器页面就会自动关闭,下面话不多说了,来一起看看详细的介绍吧. 注:该代码不兼容火狐浏 ...
js鼠标拖动元素移动
拖动元素移动 var odiv = document.getElementsByTagName('div')[0];//给需要移动的元素添加onmousedown事件odiv.onmousedown ...
html css工资条样式,JS+CSS3交互式拖动滑块选择工资条代码
一款JS+CSS3交互式拖动滑块选择工资条代码,可以托工工资下面的滑块来实时改变工资的数值大小,除了数字变化的同时还有一个颜色的平滑变化,当数值到最大值时,有一个文字的摆动动画特效. 查看演示下载资 ...
2）JS动态生成HTML元素的爬取
2)JS动态生成HTML元素的爬取 import java.util.List;import org.openqa.selenium.By; import org.openqa.selenium.We ...
html设置根rem,经过js动态设置根元素的rem方案
rem目前是响应式开发移动端一个很重要也是经常使用的一个元素,可是在网上看的各类文章都会超级懵逼.因此我在下面给出两个方案,也列举出使用方法,让你们一目了然.前提是设计稿以750为准.其中测试的设计稿 ...
JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）...
主要原因:在页面给元素注册点击事件的时候[ $(function () { XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效解决方法: 方案一:js动态生成元素后再给 ...
js动态生产html元素,js 动态创建 html元素
js 动态创建 html元素 js学习之动态创建html元素 body{margin:0;padding:0;} .sky{background:#000;width:1000;height:500p ...

JS实现右键拖动元素

JS实现右键拖动元素相关推荐

最新文章

热门文章