积分兑换商城网站建设,企业邮箱申请域名,团购营销型网站制作,开发安卓app用什么语言原生JS-鼠标拖动 通过鼠标的点击事件通过h5的属性 通过鼠标的点击事件 步骤#xff1a; 1. 鼠标按下div。 2. 鼠标移动#xff0c;div跟着移动
原生js#xff0c;实现拖拽效果。1. 给被拖拽的div加上 onmousedown 鼠标【按下事件】。鼠标按下的时候#xff0c;开始监听鼠标… 原生JS-鼠标拖动 通过鼠标的点击事件通过h5的属性 通过鼠标的点击事件 步骤 1. 鼠标按下div。 2. 鼠标移动div跟着移动
原生js实现拖拽效果。1. 给被拖拽的div加上 onmousedown 鼠标【按下事件】。鼠标按下的时候开始监听鼠标的移动。2. div按下后全局监听鼠标【移动事件】。鼠标移动后给div赋值。绝对定位。3. 全局监听鼠标【抬起事件】。当鼠标抬起的时候。取消监听鼠标的【移动】【抬起】事件。!DOCTYPE html
htmlhead meta charsetUTF-8titleDrag/titlestyle#box {width: 60px;height: 60px;background-color: red;position: absolute; }/style/headbodydiv idbox/div /bodyscript// 一共就两步// 1. 鼠标按下div// 2. 鼠标移动div跟着移动// 原生js实现拖拽效果。// 1. 给被拖拽的div加上 onmousedown 鼠标【按下事件】。// 鼠标按下的时候开始监听鼠标的移动。// 2. div按下后全局监听鼠标【移动事件】。// 鼠标移动后给div赋值。绝对定位。// 3. 全局监听鼠标【抬起事件】。// 当鼠标抬起的时候。取消监听鼠标的【移动】【抬起】事件。window.onload function () { let divDom document.getElementById(box);// 一. 监听div按下的事件divDom.onmousedown function (ev) {let oevent ev || event;let distanceX oevent.clientX - divDom.offsetLeft;let distanceY oevent.clientY - divDom.offsetTop;// 二. 全局监听鼠标的移动事件。document.onmousemove function (ev) {let oevent ev || event;divDom.style.left oevent.clientX - distanceX px;divDom.style.top oevent.clientY - distanceY px;};// 三. 全局监听鼠标的抬起事件。当鼠标抬起的时候给去全局监听。document.onmouseup function () {document.onmousemove null;document.onmouseup null;};};};/script
/html
通过h5的属性 添加 draggabletrue 就能拖动。然后记录位置。 这种方式简单的多只需要添加属性然后记录位置就行。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv{width: 100px;height: 100px;background-color: red;position: absolute;left: 0px;top: 0px;}/style
/head
bodydiv draggabletrue/divscriptvar div document.getElementsByTagName(div)[0];var X 0,Y 0;div.ondragstart function(e){ X e.clientX; //记录鼠标点下的位置。(因为div的定位点是左上角 00)Y e.clientY;}div.ondragend function(e){var X1 e.clientX - X; //结束的位置减去鼠标点下的位置那么得到的位置就是div落下的位置。var Y1 e.clientY - Y;div.style.left div.offsetLeft X1 px; //这里还需要加上 div当前的位置 累加。 div.style.top div.offsetTop Y1 px;}/script
/body
/html这个属性最常见的用法是把A元素拖动到B容器中。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle#div{width: 100px;height: 100px;background-color: red;position: absolute;left: 0px;top: 0px;}#div2{width: 200px;height: 200px;background-color: green;margin-top:200px;}/style
/head
bodydiv iddiv draggabletrue/divdiv iddiv2/divscript// 获取可以拖动的元素const draggable document.getElementById(div);// 获取容器元素const droppable document.getElementById(div2);// 容器元素droppable.addEventListener(dragover, dragOver);droppable.addEventListener(drop, dragDrop);function dragOver(e) {e.preventDefault();}function dragDrop(e) {// 添加DOM this.append(draggable);}/script
/body
/htmlA移动前
A移动后 可以写点样式用于显示隐藏div
