js 元素可随意拖动变形

已于 2024-01-12 14:21:59 修改
阅读量1k 收藏 19
点赞数 20
文章标签： javascript 开发语言 ecmascript
于 2024-01-12 11:46:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NEWonclick/article/details/135545958
版权

1. 实现目标效果

2. 实现原理

        1. 前言

       在这之前可以先进入我的博客js 仿window拉选框 / 选中文件  可以先看一下这篇文章，实现原理大同小异，最后我会贴上代码方便使用。 

        如果遇到缩放问题，可以使用“window.devicePixelRatio”这段代码获取缩放比例，并加入到计算方向的代码块中。

        2. 规则

        可以看到每个方块的”上左，中上，上右，中左，中右，下左，中下，下右“，8个顶点，而”中上，中下，中左，中右“只能向一个轴方向运动，其余的点可以随意拖动

        3.原理

        可以看到最上方gif图，当拖动”上左”的点时，可以找到对角“下右”为二维坐标系的原点，心里可以想象一个二维坐标系，如图2.3.1，拖动点击的点，可以想象成，初始点击的位置在“下右”移动到了“上左”，到这里就和我前言里推荐大家先去看的那篇文章一样了。

        拖动”中上，中下，中左，中右“这四个点时，可以在元素中心想象一个二维坐标系，如图2.3.2，“中上，中下”为Y轴，“中左，中右”为X轴，当在Y轴运动时只需要修改元素的top和height属性，X轴运动时只需要修改left和width属性

        最后就可以生成一个json格式数据传给后端了

图2.3.1                                                         图2.3.2

 

 3. 代码

        方法解释

  1. initEL 给大盒子初始化状态
  2. addEventEl 给小盒子添加对应的事件
  3. ElMouseDown 小盒子鼠标按下方法|顶点鼠标按下事件
  4. ElMouseMove 小盒子鼠标移动方法
  5. ElMouseUp     小盒子鼠标抬起方法
  6. itemMouseMove 顶点移动方法
  7. itemMouseUp     顶点抬起方法
  8. initItemEl            初始化小盒子的状态
  9. initItemBox         处理顶点拖动效果
  10. addItemBoxDom   给小盒子添加顶点
  11. getClientRect        获取元素坐标属性（bottom height left right top width x y）
  12. isOutBoundary     判断拖动小盒子是否到达边界
  13. $       获取单个元素dom
  14. $All   获取多个元素dom

在 addItemBoxDom方法中会为所有顶点添加Attribute属性“data-index”用于区分具体哪个顶点 

可以使用drag类进行二次封装，添加自己想要的方法，不懂得可以私信博主

const drag = new Drag({
  el:'.container',      // 盒子
  item:'.drag-item',    // 小盒子
});
class Drag{
  constructor({
    el,item
  }){
    this.el = this.$(el);
    this.item = item;
    this.itemList = this.$All(item);
    this.itemBoxSize = 5;

    this.InitPointer = {x:0,y:0}; // 鼠标初始位置
    this.currentEl = null;
    this.currentElItem = null;
    this.isActive = false; // 标记是否第一次点击
    this.init();
  }
  init(){
    this.initEl();
    this.initItemEl();
    this.addEventEl();
  }
  initEl(){
    this.el.style.cssText = 'position: relative;';
  }
  addEventEl(){
    for(let i = 0; i < this.itemList.length; i++){
      this.itemList[i].addEventListener('mousedown',this.ELMouseDown);
    }
  }

  ELMouseDown = (e) => {
    this.currentEl = e.target;
    let rect = this.getClientRect(this.currentEl);
    this.elInitPointer = {x:e.x,y:e.y,rectX:rect.left,rectY:rect.top,rectW:rect.width,rectH:rect.height};
    this.currentElItem = e.target;
    // 区分方块
    if(e.target.className == 'drag-item-box'){
      this.isActive = true
      this.currentEl = e.target.offsetParent
      rect = this.getClientRect(this.currentEl);
      this.elInitPointer = {x:e.x,y:e.y,rectX:rect.left,rectY:rect.top,rectW:rect.width,rectH:rect.height,top:rect.top,left:rect.left};
      document.addEventListener('mousemove',this.itemMouseMove);
      document.addEventListener('mouseup',this.itemMouseUp);
      return;
    }
    document.addEventListener('mousemove',this.ELMouseMove);
    document.addEventListener('mouseup',this.ELMouseUp);
  }
  ELMouseMove = (e) => {
    // this.removeLine();
    const {x:initX,y:initY,rectX,rectY} = this.elInitPointer;
    const {x,y} = e;
    const xMove = rectX + x - initX;
    const yMove = rectY + y - initY;
    this.currentEl.style.top = `${yMove}px`;
    this.currentEl.style.left = `${xMove}px`;
    this.isOutBoundary();
    // this.isShowLine();
  }
  ELMouseUp = (e) => {
    document.removeEventListener('mousemove',this.ELMouseMove);
    document.removeEventListener('mouseup',this.ELMouseUp);
    // this.removeLine();
  }
  itemMouseMove = (e) => {
    this.initItemBox(e)
  }
  itemMouseUp = (e) => {
    document.removeEventListener('mousemove',this.itemMouseMove);
    document.removeEventListener('mouseup',this.itemMouseUp);
  }

  initItemEl(){
    const boxItme = 8;
    for(let i = 0; i < this.itemList.length; i++){
      const item = this.itemList[i];
      item.style.position = 'absolute';
      item.style.left = '50px';
      item.style.top = `${i * 120}px`
      for(let j = 0; j < boxItme; j++){
        this.addItemBoxDom(item,j);
      }
    }
  }
  initItemBox(e){
    this.isOutBoundary();
    const data_index = Number(this.currentElItem.getAttribute('data-index'));
    const id = '.drag-item-box';
    const list = this.currentEl.querySelectorAll(id);
    const arr = [0,2,5,7];
    const arr1 = [1,6];

    const {x:initX,y:initY,rectW,rectH,left,top} = this.elInitPointer;
    let x = 0;
    let y = 0;
    let moveX = 0;
    let moveY = 0;
    if(this.isActive){
      const obj = {
        0:()=>{
          x = left + rectW;
          y = top + rectH;
          moveX = left;
          moveY = top;
        },
        2:() => {
          x = left;
          y = top + rectH;
          moveX = left + rectW;
          moveY = top;
        },
        5:() => {
          x = left + rectW;
          y = top;
          moveX = left;
          moveY = top + rectH;
        },
        7:() => {
          x = left;
          y = top;
          moveX = left + rectW;
          moveY = top + rectH;
        },
        1:() => {
          y = top + rectH;
          moveY = top;
        },
        6:()=>{
          y = top;
          moveY = top + rectH;
        },
        3:()=>{
          x = left + rectW;
          moveX = left;
        },
        4:()=>{
          x = left;
          moveX = left + rectW;
        },
      }
      obj[data_index]();
      this.elInitPointer.x = x;
      this.elInitPointer.y = y;
      this.isActive = false;
    }else{
      x = initX;
      y = initY;
      moveX = e.clientX;
      moveY = e.clientY;
    }
    // 计算移动后对应元素宽高
    const width = Math.abs(x - moveX);
    const height = Math.abs(y - moveY);
    if(arr.includes(data_index)){
      if(moveX > x && moveY > y){ // 4
        this.currentEl.style.left = x + 'px';
        this.currentEl.style.top = y + 'px';
      }else if(y > moveY && x < moveX){ // 1
        this.currentEl.style.top = moveY + 'px';
        this.currentEl.style.left = x + 'px';
      }else if(moveX < x && moveY > y){ // 3
        this.currentEl.style.left = moveX + 'px';
        this.currentEl.style.top = y + 'px';
      }else if(moveY < y && moveX < x){ // 2
        this.currentEl.style.top = moveY + 'px';
        this.currentEl.style.left = moveX + 'px';
      }
      this.currentEl.style.height = height + 'px';
      this.currentEl.style.width = width + 'px';
    }else{
      if(arr1.includes(data_index)){
        if(moveY > y){
          this.currentEl.style.top = y + 'px';
        }else{
          this.currentEl.style.top = moveY + 'px';
        }
        this.currentEl.style.height = height + 'px';
      }else{
        if(moveX > x){
          this.currentEl.style.left = x  + 'px';
        }else{
          this.currentEl.style.left = moveX + 'px';
        }
        this.currentEl.style.width = width + 'px';
      }
    }
    
  }
  addItemBoxDom(dom,index){
    /**
     * 0  1  2
     * 3     4
     * 5  6  7
     */
    const div = document.createElement('div');
    div.classList = "drag-item-box";
    div.setAttribute('data-index',index);
    div.style.cssText = `z-index:1000;cursor:pointer;position: absolute;width:${this.itemBoxSize}px;height:${this.itemBoxSize}px;border:1px solid #000;`;
    const rect = this.getClientRect(dom);
    let x = 0;
    let y = 0;
    // itemBoxSize 一半
    const itemBoxh = this.itemBoxSize / 2;
    const style = {
      0:() => {
        x = `calc(-${itemBoxh}px)`
        y = `calc(-${itemBoxh}px)`;
      },
      1:()=> {
        x = `calc(50% - ${itemBoxh}px)`;
        y = `calc(-${itemBoxh}px)`;
      },
      2:()=> {
        x = `calc(100% - ${itemBoxh}px)`;
        y = `calc(-${itemBoxh}px)`;
      },
      3:()=> {
        x = `calc(-${itemBoxh}px)`;
        y = `calc(50% - ${itemBoxh}px)`;
      },
      4:()=> {
        x = `calc(100% - ${itemBoxh}px)`;
        y = `calc(50% - ${itemBoxh}px)`;
      },
      5:()=> {
        x = `calc(-${itemBoxh}px)`;
        y = `calc(100% - ${itemBoxh}px)`;
      },
      6:()=> {
        x = `calc(50% - ${itemBoxh}px)`;
        y = `calc(100% - ${itemBoxh}px)`;
      },
      7:()=> {
        x = `calc(100% - ${itemBoxh}px)`;
        y = `calc(100% - ${itemBoxh}px)`;
      }
    }
    style[index]();
    div.style.left = x;
    div.style.top = y;
    dom.appendChild(div);
  }
  // 获取元素属性
  getClientRect(dom){
    // bottom height left right top width x y
    return dom.getBoundingClientRect();
  }
  // 判断方块是否到边界
  isOutBoundary(){
    const container = this.getClientRect(this.el)
    const rect = this.getClientRect(this.currentEl);
    if(rect.left <= 0){this.currentEl.style.left = container.left;}
    if(rect.top <= 0){this.currentEl.style.top = container.top;}
    if(rect.left >= container.width - rect.width){this.currentEl.style.left = container.width - rect.width + 'px';}
    if(rect.top >= container.height - rect.height){this.currentEl.style.top = container.height - rect.height + 'px';}
  }
  $(el){
    return document.querySelector(el);
  }
  $All(el){
    const el_list = document.querySelectorAll(el);
    if(el_list.length <= 0){
      return [];
    }
    return el_list;
  }
}

NEWonclick
关注
  • 20
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS拖拽div（移动）
霸气工作室
08-16 1110
 #dv {     width:100px;     height:100px;     background-color:blue;     border-radius:50%;     position:absolute; } &lt;div id="dv"&gt;&lt;/div&gt; //获取元素 var dv = document.getElementById('dv'); v...
JavaScript拖拽移动
weixin_51965509的博客
11-10 64
document.onmousemove=function(evt){ var e = evt || event; var oImg = document.querySelector("myimg"); oImg.style.left = e.pageX - oImg.offsetWidth/2 +"px"; oImg.style.top = e.pageY - oImg.style.height/2 + "px"; }
js拖拽div移动
445822357
11-09 204
js拖拽div移动,就是鼠标点击住div，根据鼠标的位置来改变div的位置 如有转载，请标明来自此出处http://blog.csdn.net/qxs965266509，必须注意！ 第一种方法如下： 代码如下： html代码如下： &lt;div id="message_box" style="position:absolute; background-color:#FFFF...
js实现拖拽
shiyzhang
04-14 451
js实现拖拽 实现方式 mousedown、mousemove和mouseup 拖着目标元素在页面任意位置 如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。 onmousedown：鼠标按下事件 onmousemove：鼠标移动事件 onmouseup：鼠标抬起事件 重点： 1、一定要绝对定位，脱离文档流才可以移动。 2、绑定拖拽的元素，移动和鼠标松开后是对document的绑定，因为移动的是整个div。 3、点击：a= 获取当前鼠标坐标、b =div距浏览器距离、c =
js实现拖拽功能
study_way的博客
10-17 2098
在这个示例中，创建了两个元素：一个可拖拽的元素（draggable）和一个接受拖动的目标元素（droppable）。ondragover 阻止默认行为，以允许元素可以放置在该区域，而 ondrop 处理实际的拖放操作，将拖拽的元素追加到目标元素中。通常，要实现拖拽效果，需要将元素设置为绝对定位，这样它可以脱离文档流，使其能够在页面上自由移动。事件处理程序中更新元素的位置时，限制元素的移动范围，以防止它移出可见区域或父元素的边界。事件处理程序中，计算鼠标位置的变化，并根据变化来更新被拖拽元素的位置。
javascript实现dom元素可拖动
10-22
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for ...通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
javascript实现拖动元素交换位置
10-23
在JavaScript中实现拖动元素并交换位置的效果，通常涉及到事件监听、CSS样式调整以及DOM操作。以下是一个简化的实现步骤： 1. **设置HTML结构**： 首先，你需要创建一个包含多个可拖动元素（如`<li>`）的容器（如`...
JavaScript实现可拖拽的拖动层Div实例
10-23
主要介绍了JavaScript实现可拖拽的拖动层Div的方法,拖拽页面中的div块可实现div块按照拖动轨迹移动的效果,涉及javascript鼠标事件、页面元素样式结合事件函数动态操作的相关技巧,需要的朋友可以参考下
javascript 随意拖动的小方块特效
10-30
在JavaScript中，实现一个可随意拖动的小方块特效涉及到事件处理、DOM操作以及CSS样式控制。下面我们将详细探讨这些知识点。 首先，我们看到HTML部分创建了一个具有粉色背景的`<div>`元素，它有一个id为`divBlock`...
js网页中随意拖动的小方块实现代码
10-30
"JS网页中随意拖动的小方块实现代码" 本文主要讲解如何使用JavaScript和CSS在网页中实现一个随意拖动的小方块。下面是详细的实现步骤和相关知识点： HTML结构 首先，我们需要在HTML中添加一个div元素，用于承载...
一个用在手机上的简单js拖拽效果
ForMyQianDuan的博客
05-12 3163
http://blog.163.com/xiaoyou_000/blog/static/65067392201521664214534/ http://www.17sucai.com/pins/8765.html 手机拖拽效果       content="         width = device-width ,   height = device-hei
如何实现原生 JS 的拖拽效果
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
03-16 1100
前言: 关于“拖拽”，其实是一个老生常谈的需求了，并且还是一个非常经典的面试题。之前在项目中拖拽的场景都是直接使用轮子，虽然很快就能完成设计需求，但是这个的原理一直都是我十分想去深入了解的一部分。正好在今天的项目中再一次碰到了这个需求，我觉得是时候去探索一下它了。tips: 本文不会使用 Draggable 去实现，而是会采用原生的 JS 鼠标移动，鼠标点击等事件去完成。并且你需要明确知道的一点是...
js实现元素可拖拽方法
最新发布
weixin_57399180的博客
12-07 537
对元素进行拖拽（可拖出页面）
js实现拖拽移动
骨子里的偏爱
04-19 606
【代码】js实现拖拽移动。
一文教你如何用JS代码来操作元素拖拽移动的效果
SuBaijiu的博客
11-12 3494
一文教你如何用JS代码来操作元素拖拽移动的效果
js中的拖拽
betterangela的博客
11-11 3201
拖拽 dom javascript
js拖拽事件详解
weixin_68658847的博客
11-11 4895
js拖拽事件详解
vue 元素可拖拽缩放组件
05-20
你可以使用 Vue.js 和一些第三方库来实现可拖拽缩放组件，以下是一个基本的实现步骤： 1. 安装第三方库，例如 vue-draggable-resizable 或 vue-draggable 。 2. 在 Vue 组件中引入库并注册组件。 3. 在模板中使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值