盒子拖拽效果，原生js实现

原生js实现拖拽效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hello2</title></head>
<style>#box1{position: absolute;width: 100px;height: 100px;background: blue;cursor: move;}
</style>
<body><div id="box1"></div>   </body>
</html>
<script type="text/javaScript">//     拖拽box1元素// 拖拽的流程// 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown// 2。当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove// 3。当鼠标松开时，被拖拽元素固定在当前位置 onmouseupwindow.onload = function(){//获取box1var box1 = document.getElementById("box1");//为box1绑定一个鼠标按下事件///当鼠标在被拖拽元素上按下时，开始拖拽 onmousedownbox1.onmousedown = function(event){//设置box1捕获所有鼠标按下的事件// if(box1.setCapture){//     box1.setCapture();// }// box1.setCapture && box1.setCapture();var event = event || window.event;//div的偏移量 鼠标clentX- 元素.offsetLeft//div的偏移量 鼠标.clentY - 元素.offsetTopvar ol = event.clientX - box1.offsetLeft;var ot = event.clientY - box1.offsetTop;//为document绑定一个onmousemove事件document.onmousemove = function(event){var event = event  || window.event;//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove//获取鼠标的坐标var left = event.clientX -ol;var top = event.clientY- ot;//修改box1的位置box1.style.left = left+"px";box1.style.top = top+"px";};//为元素绑定一个鼠标松开事件document.onmouseup = function(event){//当鼠标松开时，被拖拽元素固定在当前位置 onmouseup//取消document的onmousemove事件this.onmousemove = null;//取消document的onmouseup事件this.onmouseup = null;console.log("nihao");//当鼠标松开时，取消对事件的捕获// box1.releaseCapture();// box1.releasePointerCapture && box1.releasePointerCapture();};//当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false来取消默认行为//不这对IE8不起作用return false;};};</script>

盒子拖拽效果，原生js实现相关推荐

移动端实现图标拖拽效果
做一个像苹果手机桌面的HOME键一样的图标,实现图标按钮在页面上可拖拽效果.js代码如下: window.onload = function () {var oDiv = document.getEl ...
html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
【加强版】js原生实现拖拽效果，这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的（但是有个弊端：拖拽过程中鼠标会变成一个禁用符号，不太友好）
<div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
原生拖拽太拉跨了，纯JS自己手写一个拖拽效果，纵享丝滑
前言提到元素拖拽,通常都会先想到用 HTML5 的拖拽放置 (Drag 和 Drop) 来实现,它提供了一套完整的事件机制,看起来似乎是首选的解决方案,但实际却不是那么美好,主要是它的样式太过简陋, ...
原生JS实现鼠标按下拖拽效果
原生JS实现鼠标按下拖拽效果 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
html实现鼠标拖拽按钮,JS实现鼠标按下拖拽效果
原生js实现鼠标按下拖拽效果,供大家参考,具体内容如下鼠标拖动 body { margin: 0; } div { width: 200px; height: 200px; position: ab ...
html设置图片不可拖拽,js css3实现图片拖拽效果
本文实例为大家分享了css3实现图片拖拽效果的具体代码,供大家参考,具体内容如下 body{ text-align: center; } .container{ display: flex; just ...

盒子拖拽效果，原生js实现

原生js实现拖拽效果

盒子拖拽效果，原生js实现相关推荐

最新文章

热门文章