原生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;
    position: absolute;
    left:0;
    top:0;
    cursor: move;
  }
</style>
<body>
      <div id="box"></div>
</body>
</html>
<script>
     var oBox=document.getElementById(‘box‘);

oBox.onmousedown=function(e){
            var e=e || event;
            var disX=e.offsetX;
            var disY=e.offsetY;

var iWidth=document.documentElement.clientWidth-this.offsetWidth;
            var iHeight=document.documentElement.clientHeight-this.offsetHeight;

document.onmousemove=function(e){
           var l=e.clientX-disX;
           var t=e.clientY-disY;

l = l>iWidth?iWidth:(l<0?0:l);
           t = t>iHeight?iHeight:(t<0?0:t);

oBox.style.left=l+"px";
           oBox.style.top=t+"px";
        }

document.onmouseup=function(){
        document.onmousemove=null;
       }
   }
</script>

原文地址:https://www.cnblogs.com/jsjx-xtfh/p/9498715.html

时间: 2024-10-03 18:14:54

原生js拖拽效果的相关文章

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

<!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

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拖拽(面向对象)

代码地址:http://files.cnblogs.com/files/fxnet/%E5%8E%9F%E7%94%9Fjs%E6%8B%96%E6%8B%BD%EF%BC%88%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%EF%BC%89.rar <style> img { width: 200px; height: 200px; } .fx_drag { background: green; width: 300px; height: 500px; float: