盒子移动的问题，拖拽问题

最新推荐文章于 2022-07-19 10:18:18 发布
最新推荐文章于 2022-07-19 10:18:18 发布
阅读量271 收藏 1
点赞数 1
原文链接：http://www.cnblogs.com/zyx1102/p/6490053.html
版权

先来看一个简单的例子，5个盒子在页面中，实现盒子的移动

在css 中设置样式，

<style>
    div{
        width: 200px;
        height:200px;
        border: 1px solid #FF0000;
        position: absolute;
    }
    div:nth-child(1){
        top:0;
        left:0;
    }
    div:nth-child(2){
        top:200px;
        left:0;
    }
    div:nth-child(3){
        top:400px;
        left:0;
    }
    div:nth-child(4){
        top:600px;
        left:0;
    }
    div:nth-child(5){
        top:800px;
        left:0;
    }
</style>

　　在body中

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

　　在js中

<script>
    class Drag{
        constructor(selector){
            this.eles=document.querySelectorAll(selector);
            this.startDrag();
        }
        startDrag() {
            for (var i = 0; i < this.eles.length; i++) {
                var that = this;
                this.eles[i].onmousedown = function (e) {
                    //console.log(this);
                    var left = this.offsetLeft;
                    var top = this.offsetTop;
                    var cx = e.clientX;
                    var cy = e.clientY;
                    that.lenx = cx - left;
                    that.leny = cy - top;
                    //console.log(that);
                    that.move(this);
                    //console.log(that);
                    that.up();
                }
            }
        }
            move(obj){
                var that=this;
                document.οnmοusemοve=function (e) {
                    var cx=e.clientX;
                    var cy=e.clientY;
                    obj.style.left=cx-that.lenx+"px";
                    obj.style.top=cy-that.leny+"px";
                }
            }
            up(){
                document.οnmοuseup=function () {
                    document.οnmοusemοve=null;
                    document.οnmοuseup=null;
                }
            }
    }

    window.οnlοad=function () {
        new Drag("div");
    }
</script>

　　看看  经典的盒子拖拽的问题，一个盒子的运动，并且 当鼠标停止时，可以出现缓动

<style>
.parent{
   width: 800px;
   height: 600px;
   border:1px solid #000;
   position: absolute;
   left: 0;right: 0;top:0;bottom: 0;
   margin: auto;
}
.son{
   width: 100px;
   height: 100px;
   background: red;
   position: absolute;
}
</style>

　　

<body>
   <div class="parent">
       <div class="son"></div>
   </div>
</body>

　　面向对象的方式

<script>
//面向对象
 class drag{
    constructor(selector){
    	 this.eles=document.querySelectorAll(selector);
        this.starDrag();
    }
    starDrag(){
    	  var that=this;
       for(var i=0;i<this.eles.length;i++){
          this.eles[i].οnmοusedοwn=function(e){
          	that.left=this.offsetLeft;
          	that.top=this.offsetTop;
          	that.cx=e.clientX;
          	that.cy=e.clientY;
          	that.lenx=that.cx-that.left;
          	that.leny=that.cy-that.top;
          	that.move(this);
          	that.up();
          }
       }
    }
    move(obj){
    	  var that=this;
    	  document.οnmοusemοve=function(e){

    	     that.cx=e.clientX;
    	     that.cy=e.clientY;
    	     obj.style.left=that.cx-that.lenx+"px";
    	     obj.style.top=that.cy-that.leny+"px";
    	  }
    }
    up(){
    	  document.οnmοuseup=function(){
    	  	document.οnmοusemοve=null;
    	    document.οnmοuseup=null;
    	  }
    }
 }
 new drag("div");
</script>

　　面向过程

<script>
function drag(obj){
   this.obj=obj.ele;
   this.minx=obj.rect.minx;
   this.maxx=obj.rect.maxx;
   this.miny=obj.rect.miny;
   this.maxy=obj.rect.maxy;
   this.dirx=obj.dir.x===false? obj.dir.x:true;
   this.diry=obj.dir.y===false? obj.dir.y:true;
   this.yizi=0.8;
   this.prex=0;
   this.prey=0;
   this.nextx=0;
   this.nexty=0;
   this.down();
}
drag.prototype={
   down:function(){
      var that=this;
      this.obj.οnmοusedοwn=function(e){
         var left=this.offsetLeft;
         var top=this.offsetTop;
         var cx=e.clientX;
         var cy=e.clientY;
         that.x=cx-left;
         that.y=cy-top;
         that.move();
         that.up();
      }
   },
   move:function(){
      var that=this;
      document.οnmοusemοve=function(e){
         var cx=e.clientX;
         var cy=e.clientY;
         var left=cx-that.x;
         var top=cy-that.y;
         if(left<that.minx){left=that.minx};
         if(left>that.maxx-that.obj.offsetWidth){left=that.maxx-that.obj.offsetWidth};
         if(top<that.miny){top=that.miny};
         if(top>that.maxy-that.obj.offsetHeight){top=that.maxy-that.obj.offsetHeight};
         if(that.dirx){
            that.obj.style.left=left+"px";
         }
         if(that.diry){
            that.obj.style.top=top+"px";
         }  
         that.nextx=left;
         that.nexty=top;
         that.lenx=that.nextx-that.prex;
         that.leny=that.nexty-that.prey;
         that.prex=that.nextx;
         that.prey=that.nexty;
      }
   },
   up:function(){
      document.οnmοuseup=()=>{
          document.οnmοusemοve=null;
          document.οnmοuseup=null;
          this.animate();
      }
   },
   animate:function(){
      var t=setInterval(()=>{
         this.lenx*=this.yizi;
         this.leny*=this.yizi;
         var x=this.lenx+this.obj.offsetLeft;
         var y=this.leny+this.obj.offsetTop;

         if(x<this.minx){x=this.minx};
         if(x>this.maxx-this.obj.offsetWidth){x=this.maxx-this.obj.offsetWidth};
         if(y<this.miny){y=this.miny};
         if(y>this.maxy-this.obj.offsetHeight){y=this.maxy-this.obj.offsetHeight};

         if(Math.abs(this.lenx)>=Math.abs(this.leny)){
              if(Math.abs(this.lenx)<=1){
                  clearInterval(t);
              }
         }else{
              if(Math.abs(this.leny)<=1){
                  clearInterval(t);
              }
         }
         if(this.dirx){
            this.obj.style.left=x+"px";
         }
         if(this){
            this.obj.style.top=y+"px";
         }
      },60)
   }
}
var son=document.querySelector(".son");
new drag({ele:son,rect:{minx:0,maxx:800,miny:0,maxy:600},dir:{x:true,y:true}})
</script>

　　

 

转载于:https://www.cnblogs.com/zyx1102/p/6490053.html

weixin_30311605
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
拖拽盒子实现
一颗帅白菜的博客
03-31 229
【代码】拖拽盒子实现。
盒子移动
koukou0419的博客
06-02 493
<div style="background-color: green;width:200px;height:100px;position:absolute;left:0;top:0"></div> <script> //让盒子移动 //获取当前盒子的left和top值（getComputedStyele(elem,null).left），然后再这基础之...
移动端实现盒子拖拽
huangxinyi123的博客
04-05 439
<div id="box"></div> *{margin: 0; padding: 0; } ul{list-style: none; } #box{width: 100px; height: 100px; background: #bfa; color: white; position: absolute; left:
移动端（五）盒子拖拽
libufan的博客
07-13 304
拖拽的核心： 元素最终位置 =元素初始位置 + 鼠标距离差 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 元素初始位置 + 鼠标距离差 = 元素最终位置 --> <...
Vue拖拽组件的使用，实现盒子之间相互拖拽排序clone
qq_41429765的博客
02-26 948
首先需要安装vuedraggable依赖包： yarn addvuedraggable 因为拖拽组件依赖sortablejs,如果项目没有安装sortablejs,可能需要安装一下 yarn add sortablejs html代码： <template> <div class="dndList"> <div class="dndList-list"> <h3>常用</h3> <d...
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
10-17
首先来看鼠标拖拽盒子移动的功能。要实现这个功能，需要监听鼠标事件，主要包括mousedown、mousemove和mouseup事件。以下是一个简单的示例代码： ```javascript window.onload=function(){ var oDiv=document....
JavaScript实现拖拽盒子效果
10-15
JavaScript实现拖拽盒子效果涉及到的主要知识点包括： 1. HTML结构的搭建：首先需要在页面上构建基本的HTML结构，例如设置一个盒子容器，该盒子内部可能包含一个超链接用于显示或隐藏盒子，一个带有蓝色区域的可...
JavaScript拖拽移动盒子.html
12-18
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的...
js实现盒子拖拽动画效果
10-14
在本文中，我们将探讨如何使用JavaScript实现一个基本的盒子拖拽动画效果。这个效果允许用户通过鼠标拖动一个带有标题的矩形框（"wrap" 类）在页面上移动。我们将分析提供的代码片段，并解释其中的关键部分。 首先...
用JavaScript实现拖拽盒子
yangaoyuan1999的博客
12-08 777
实现效果： 1.单击关闭，关闭盒子 2.点击左上方‘点击注册’，打开盒子 3.鼠标放在盒子上方蓝色区域显示十字 4.点击鼠标不松开就可移动盒子 5.松开鼠标图片暂停 实现步骤： 1.在页面最上方设置一个盒子，里面有一个超链接， 超链接里面设置href="javascript:void(0);"，再点击时不打开网页。 2.再设置一...
VC++ 拖放选中的对象示例 在窗口中，那个圆形是可以被鼠标手动的，窗体的任何一个空白区域都可以拖动，用圆形来代替拖动区域，目的是为了更清淅的说明被拖动对象的操作。
04-16
VC++拖放选中的对象示例 VC++拖放选中的对象示例，在窗口中，那个圆形是可以被鼠标手动的，窗体的任何一个空白区域都可以拖动，用圆形来代替拖动区域，目的是为了更清淅的说明被拖动对象的操作。
js实现盒子移动动画效果
10-14
主要为大家详细介绍了js实现盒子移动动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现盒子拖拽功能
逆风优雅的博客
06-26 763
注意：盒子要脱离文档流。盒子移动的边界。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> .
纯H5+CSS实现拖拽效果(PC端，移动端均可)
m0_37853444的博客
06-08 1052
纯H5+CSS实现拖拽效果 H5+CSS3实现拖拽效果，可设置超出范围自动滚回 PC端与移动端的写法在触发事件和获取触发点到屏幕边距有所不同 本篇以移动端为例，PC端将事件与获取边距方式修改即可 PC端获取鼠标与窗口左边距 event.clientX 鼠标事件 onmousedown onmousemove onmouseup 移动端获取触摸点与窗口左边距 event.touches[0].pageX 触摸事件 ontouchstart ontouchmove ontouchend <!DOCTYPE
小盒子可以在大盒子里面移动
m0_64937973的博客
07-14 898
会移动的小盒
Vuejs自定义指令实现移动端和pc端的div随意拖拽。
weixin_47679798的博客
09-17 910
在Vue里提倡操作虚拟dom尽量不操作真实是dom。但在频繁操作dom的情况下显然体验不好，使用Js操作真实dom来实现div的随意拖拽。 这里为了复用，写成了指令，方便其他页面使用，直接调指令，不需要重复写。 pc端： <template> <div class="ha"> <div class="box" v-wahaha></div> </div> </template> <script> expor
移动端盒子拖动效果(有效，坑已踩)（自定义指令）
摸鱼小队
07-19 418
/1.参数一指令的名称，定义时指令前面不需要写v-//2.参数二是一个对象，该对象中有相关的操作函数//3.在调用的时候必须写v-constdrag=Vue.directive('drag',{//2.每个//inserted表示一个元素，插入到DOM中会执行inserted函数，只触发一次，//函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象//注意${//1.参数一指令的名称，定义时指令前面不需要写v-//2.参数二。...
滚动切换
weixin_54668937的博客
10-28 146
文献种类：专题技术文献； 开发工具与关键技术： DW、C# 作者：方建恒 ；年级：20级 ；撰写时间： 2021 年 10 月 28日 滚动切换 下面我们来学习一下如何用JS制作一个左右滚动切换的轮播效果， 首先我们先准备好俩个a标签， 用于制作点击后图片左右滚动切换的按钮， 一个ID命名为prev,表示向左滚动切换， 另一个ID命名为next,表示向右滚动切换。 再把它们放在div标签里， 并给div标签的class命名为btns， 如图： 然后我们创建一个div标签把它的clas
JSPlumb节点拖动后，盒子端点没有跟着移动
最新发布
05-30
JSPlumb 是一个流程图和连接库，如果您的节点拖动后，盒子端点没有跟着移动，可能是因为您没有正确设置端点的位置。您可以在节点拖动结束后，手动更新每个端点的位置，以确保它们跟随节点移动。 您可以在节点拖动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值