html实现鼠标拖拽按钮,JS实现鼠标按下拖拽效果

原生js实现鼠标按下拖拽效果，供大家参考，具体内容如下

鼠标拖动

body {

margin: 0;

}

div {

width: 200px;

height: 200px;

position: absolute;

background-color: pink;

}

//定义变量储存div的宽高

var obj_w, obj_h;

//定义一个变量判断是否执行移动函数

var mousedown = false;

//鼠标按下函数

function downdiv(obj) {

//获取div的宽高

obj_w = obj.offsetwidth;

obj_h = obj.offsetheight;

//鼠标

var e = event || window.event;

//e.clientx/y 是获取鼠标相对浏览器的位置；将div中心自动居中到鼠标

obj.style.left = (e.clientx - obj_w / 2) + "px";

obj.style.top = (e.clienty - obj_h / 2) + "px";

console.log(obj.style.left, obj.style.top)

//按下时为ture,松开时为false，以判断是否执行执行mouvediv

mousedown = true;

}

//鼠标移动函数

function movediv(obj) {

obj_w = obj.offsetwidth;

obj_h = obj.offsetheight;

var e = event || window.event;

console.log(e.clientx, e.clienty);

console.log(obj_w, obj_h);

if (mousedown) {

obj.style.left = (e.clientx - obj_w / 2) + "px";

obj.style.top = (e.clienty - obj_h / 2) + "px";

console.log(obj.style.left, obj.style.top)

}

//鼠标松开函数

function updiv(obj) {

mousedown = false;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。

html实现鼠标拖拽按钮,JS实现鼠标按下拖拽效果相关推荐

html点击鼠标页面出现爱心,js实现鼠标点击飘爱心效果
本文实例为大家分享了js实现鼠标点击飘爱心的具体代码,供大家参考,具体内容如下鼠标点击特效 html { cursor: pointer; } h3 { text-align: center; us ...
html鼠标移动自动展开,JS实现鼠标滑过折叠与展开菜单效果代码
本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码.分享给大家供大家参考.具体如下: 这是一款展开菜单特效,鼠标移上的时候自动展开,移走后自动折叠隐藏起来,运用了JS技术,并结合了CSS共同实现的效 ...
html可移动的悬浮按钮,js仿苹果悬浮可拖拽按钮，并且点击展开效果
今天写了一个仿苹果的悬浮按钮,由于只在右侧展开,所以只能上下拖拽,展开效果入下 1.html 2.css @charset "gb2312"; .info-nr {position ...
用鼠标左右拖拽 html,js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 Title body{ position: relative; margin:0; padding:0; width ...
html矢量图对画布的拖拽,d3.js画矢量图+可拖拽的实现思路
箭头.png testtt.html Arrow var width = 400; var height = 400; var svg = d3.select("body").ap ...
html5鼠标经过图片切换,JS实现鼠标移入移出控制图片的切换效果
在看专业英语的时候,学习JS的Timer Event.正好有一个例子,实现的是,图片自动切换,当鼠标点击图片的时候,停止切换.于是想要动手实践一下,并且添加上自己的想法.于是就有了下面的图片和代码. ...
html+css鼠标悬停发光按钮！[HTML鼠标悬停的代码]使用HTML + CSS实现鼠标悬停的一些奇幻效果!
源码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
html鼠标悬停改变背景,js设置鼠标悬停改变背景色实现详解_哒哒_前端开发者
看了网上那么多的 this is test! }); function changBkColor(obj){ obj.οnmοuseοver=function(){ this.className=&q ...
java 鼠标点击按钮事件_Java 鼠标点击事件实例
首先我们应该知道鼠标点击事件怎么实现其部分代码如下 if (anyEvent.getButton() == MouseEvent.BUTTON1) {} e.getButton()返回值分别为NOB ...

html实现鼠标拖拽按钮,JS实现鼠标按下拖拽效果

html实现鼠标拖拽按钮,JS实现鼠标按下拖拽效果相关推荐

最新文章

热门文章