js拖拽效果的原理和实现

让我们了解一下最简单的拖拽效果:

1.首先我们先设置一个div,然后简单设置一下样式:

div{

width:50px;

height: 50px;

background-color: red;

position: absolute;

}

2.然后我们编写js部分,我们要清楚,元素的拖拽分三个部分:鼠标左键按下、拖动鼠标元素跟着移动、以及鼠标左键抬起停止拖拽元素停止移动

var div = document.querySelector("div");                            //这里我们需要知道:1>按下时开始监听在文档中鼠标移动的事件

2>开始监听鼠标松开键的事件

3>只有按下时才准备拖拽

4>当鼠标在文档移动时,不能再div上移动,因为鼠标可能离开div,造成无法拖拽

div.onmousedown = function (e1) {                                       //这里对鼠标按下事件执行事件,分别对鼠标移动和鼠标抬起情况下进行设置

document.onmousemove = function (e) {                    //当鼠标移动时,将当前鼠标相对视口的坐标赋值给元素的left和top

     div.style.left = e.clientX - e1.offsetX + "px";           //因为我们需要在按下的位置拖拽,因此我们还需要获取按下键鼠标相对div的左上角位置,使用当前鼠标位置减去这个相对元素的左上角位置,保证鼠标所按位置拖拽

div.style.top = e.clientY - e1.offsetY + "px";

}

document.onmouseup = function () {                          //当释放鼠标键时,删除鼠标移动事件和删除鼠标释放事件

document.onmousemove = null;

document.onmouseup = null;

}

}

最后我们再执行页面,元素就能够跟着拖动了

原文地址:https://www.cnblogs.com/zcx980320/p/12642358.html

时间: 2024-10-15 14:15:34

js拖拽效果的原理和实现的相关文章

js拖拽效果的原理及实现

js中元素的拖拽效果需要用到的主要的知识点为:事件侦听和鼠标事件.即被拖拽的元素添加事件侦听,侦听的事件主要为mousedown,mousemove和mouseup,一些情况下还需要用到mouseleave.本篇所针对的原理是存在多个相同元素情况下的拖拽.下面结合案例进行分析.1.首先在body中创建7个div元素,并设置css样式. <style> div{ width:50px; height: 50px; background-color: red; position: absolute

js拖拽效果实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta

React.js实现原生js拖拽效果及思考

一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件

再谈React.js实现原生js拖拽效果

前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目地就是要尽量避免直接操作dom元素,所以我们在对dom元素进行操作的时候需要注意,我之前为了获取form的参数就直接用了var dragBox=document.getElementById('form')去找dom,但是其实记录from的初始位置,可以在其子组件更新父组件参数的时候调用.即在MyF

js拖拽效果的实现

1.最基础的写法 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width:200px; height:200px; background:yellow; position:absolute;} 8 </style> 9 <sc

js 拖拽效果

<style type="text/css"> * { margin: 0; padding: 0; } #mbox { width: 600px; height: 500px; margin: 20px auto 0; background-color: #000; border: 1px solid burlywood; position: relative; } #xbox { width: 40px; height: 40px; position: absolute

拖拽效果实现原理

拖拽,主要用到onmousedown.onmouseover.onmouseup 拖拽的流程:(1)先点击 (2)在点下的物体被选中,进行move移动 (3)抬起鼠标,停止移动 [注]点击某个物体时,用oDiv即可,move和up是全局区域,也就是整个文档通用,应该用document. oDiv.onmousedown = function(){ document.onmousemove = function(){ var e = e || window.event; var diffX = e

js拖拽效果

先创建一个div <script> //获取这个div var div=document.querySelector("div"); / 按下时开始监听在文档中鼠标移动的事件 // 开始监听鼠标松开键的事件 // 只有按下时才准备拖拽 div.onmousedown=function(e1){ // 当鼠标在文档移动时,不能再div上移动,因为鼠标可能离开div,造成无法拖拽 document.onmousemove=function(e){ // 当鼠标移动时,将当前鼠标

JS拖拽效果,代码精干,通俗易懂!

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ margin-top: 10px; width: 200px; height: 150px; background: #dadada; position: absolute; cursor:move; } </style> <