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>

</head>

<body>

<div id="div" ></div>

<script>

var drag=false;

var x, y,movex,movey;

var movediv  =document.getElementById(‘div‘);

movediv.onmousedown=function(){

drag=false;

x = window.event.clientX;  /*当前鼠标坐标*/

y =window.event.clientY;

movex = movediv.offsetLeft;  /*当前元素坐标*/

movey =movediv.offsetTop

}

document.onmousemove=function(){

if(drag) return false;

movediv.style.top= movey +  window.event.clientY  -y +‘px‘;

movediv.style.left=  movex  +  window.event.clientX  -x  +‘px‘;

}

document.onmouseup=function(){drag=true}

</script>

</body>

</html>

时间： 2024-11-05 19:04:42

JS拖拽效果，代码精干，通俗易懂！的相关文章

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

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

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拖拽效果

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

js拖拽效果的原理及实现

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

js拖拽效果的原理和实现

让我们了解一下最简单的拖拽效果: 1.首先我们先设置一个div,然后简单设置一下样式: div{ width:50px; height: 50px; background-color: red; position: absolute; } 2.然后我们编写js部分,我们要清楚,元素的拖拽分三个部分:鼠标左键按下.拖动鼠标元素跟着移动.以及鼠标左键抬起停止拖拽元素停止移动 var div = document.querySelector("div");                 

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

js拖拽效果

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

原生js拖拽效果

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title><style>   *{      margin:0;      padding:0;    }   #box{    width:100px;    height:100px;    background: red;