原生draggleable属性实现拖拽功能

最新推荐文章于 2024-03-06 23:50:33 发布
最新推荐文章于 2024-03-06 23:50:33 发布
阅读量397 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42039912/article/details/120974229
版权
本文详细介绍了在Vue.js中实现拖拽功能的实现过程，包括为dragover事件的目标元素添加id或groupName属性以判断拖放合法性，以及通过mousedown事件获取拖拽元素信息。在拖拽结束后，通过handleDragEnd方法处理元素移动，判断元素是否在同一组并进行相应操作。示例代码展示了如何在modelData数据结构中进行增删改查，确保拖拽后的数据正确更新。
摘要由CSDN通过智能技术生成

 给dragover事件的target盒子都绑定一个id或groupName属性，便于判断元素是否可以拖拽到那个位置

<UxCard class="ux-page-modelSet__container flex-column" inner>
          <div :class="['model-set-container-box', isView ? 'model-set-container-box-view' : '']">
            <template v-for="(item, index) in modelData">
              <div
                  :key="index"
                  class="group-title"
                  @click="handleChangeIndex(index)"
                  :class="{'different': index === activeIndex && !isView }"
              >
                <span>{{item.groupName + `(${item.attr.length})`}}</span>
                <div class="opt" v-if="!isView">
                  <Tooltip
                      placement="top"
                      content="编辑"
                      transfer
                  >
                    <i class="simo icon-edit" :class="[item.edit ? '' : 'disable']" @click="handleEditTemplate('edit', index, $event, item)"></i>
                  </Tooltip>
                  <Tooltip
                      placement="top"
                      content="删除"
                      transfer
                  >
                    <i class="simo icon-del" :class="[item.cutable && item.edit ? '' : 'disable']" @click="handleDelTemplate(index, item, $event)"></i>
                  </Tooltip>
                  <Tooltip
                      placement="top"
                      content="上移"
                      transfer
                  >
                    <i class="simo icon-move-up" :class="[index === 0 || !item.edit ? 'disable' : '']" @click="handleUpTemplate(index, $event, index === 0 || !item.edit)"></i>
                  </Tooltip>
                  <Tooltip
                      placement="top"
                      content="下移"
                      transfer
                  >
                    <i class="simo icon-move-down" :class="[index === modelData.length - 1 || !item.edit ? 'disable' : '']" @click="handleDownTemplate(index, $event, index === modelData.length - 1 || !item.edit)"></i>
                  </Tooltip>
                </div>
              </div>
              <div class="card-box"
                   @dragover="handleDragEnd"
                   :groupName="modelData[index].groupName"
              >
                <div class="card-content" v-if="!item.attr.length" :groupName="modelData[index].groupName">
                  <div class="card-empty" :groupName="modelData[index].groupName">
                    <div class="name-empty" :groupName="modelData[index].groupName">
                      新分组至少添加一个属性！
                    </div>
                  </div>
                </div>
                <div class="card-content"
                     v-else
                     v-for="(attr, i) in item.attr"
                     :key="attr.id"
                     :draggable="!!attr.edit"
                     @mousedown="handleMouseDown(attr)"
                     :attrId="attr.id"
                >
                  <div class="card" :attrId="attr.id" :class="{'curser' : !attr.edit}">
                    <div :attrId="attr.id" class="opt" v-if="attr.edit && !isView" @click="handleDelAttribute(index, i, attr)">×</div>
                    <div :attrId="attr.id" class="name">
                      <span :attrId="attr.id" v-if="attr.fieldDefinition.attr==='REQUIRED'">*</span>
                      {{ attr.fieldName }}
                    </div>
                    <div :attrId="attr.id" class="type" v-if="typeMap[attr.fieldType]">{{ typeMap[attr.fieldType][attr.fieldDefinition.format] }}</div>
                  </div>
                </div>
              </div>
            </template>
            <span class="add" @click="handleEditTemplate('add', null, $event)" v-if="!isView">+添加新分组</span>
          </div>
          <template #bottom v-if="!isView">
            <Button @click="handleSave">确认</Button>
            <Button cancel  @click="handleCancle">取消</Button>
          </template>
        </UxCard>

 用mousedown事件来获取要拖拽的盒子信息：

handleMouseDown(w) {
      this.dragItem = w
    },

处理拖拽结束事件，注意需阻止浏览器的默认事件：

handleDragEnd(evt) {
      if (this.isView){
        return
      }
      if (evt.target.attributes.attrid) {
        let fultureId = evt.target.attributes.attrid.nodeValue
        if (this.dragItem.id === fultureId) {
          return
        }
        let futureMsg = []
        this.modelData.forEach((item, i) => {
          item.attr.forEach((attr, index) => {
            if (attr.id === fultureId && attr.edit) {
              futureMsg = [i, index]
            }
          })
        })
        if (!futureMsg.length) {
          return
        }
        let judgeIndex = this.judgeIndex(this.dragItem.id, fultureId)
        if (judgeIndex === 'notCommon') {
          this.modelData[futureMsg[0]].attr.splice(futureMsg[1], 0,this.dragItem)
          this.modelData.forEach((item, index) => {
            item.attr.forEach((attr, i) => {
              if(attr.id === this.dragItem.id && index !== futureMsg[0]) {
                this.modelData[index].attr.splice(i, 1)
              }
            })
          })
        } else {
          this.modelData.forEach((item, index) => {
            item.attr.forEach((attr, i) => {
              // 先把原来的删除
              if(attr.id === this.dragItem.id) {
                this.modelData[index].attr.splice(i, 1)
              }
            })
          })
          // 判断一下要删的在前面还是后面，吧要加的加进去
          if(judgeIndex[0] > judgeIndex[1]){
            this.modelData[futureMsg[0]].attr.splice(futureMsg[1], 0,this.dragItem)
          } else {
            this.modelData[futureMsg[0]].attr.splice(futureMsg[1] - 1, 0,this.dragItem)
          }
        }

      }
      if (evt.target.attributes.groupname) {
        let groupName = evt.target.attributes.groupname.nodeValue
        this.modelData.forEach((item, index) => {
          item.attr.forEach((attr, i) => {
            if(attr.id === this.dragItem.id) {
              this.modelData[index].attr.splice(i, 1)
            }
          })
        })
        this.modelData.forEach((item, index) => {
          if(item.groupName === groupName) {
            this.modelData[index].attr.push(this.dragItem)
          }
        })
      }
      evt.preventDefault();
    },

 判断要移动的属性和将要移到的那个位置的属性是否是同一组：

// 判断两个属性是否在同一组，并且如果在同一组，哪个后面
    judgeIndex(sourceId, targetId) {
      let sourceTemplateIndex = -1
      let targetTemplateIndex = -1
      let sourceAttrIndex = -1
      let targetAttrIndex = -1
      this.modelData.forEach((item, i) => {
        item.attr.forEach((attr, index) => {
          if (attr.id === sourceId) {
            sourceTemplateIndex = i
            sourceAttrIndex = index
          }
          if (attr.id === targetId) {
            targetTemplateIndex = i
            targetAttrIndex = index
          }
        })
      })
      // 如果是在同一个组，返回同一个组
      if (sourceTemplateIndex === targetTemplateIndex) {
        return [sourceAttrIndex, targetAttrIndex]
      } else {
        return 'notCommon'
      }
    },

 modelData:

​
"groupDef": [
        {
            "groupName": "基础属性",
            "edit": false,
            "cutable": false,
            "attr": [
                {
                    "id": "202008250000000000000000000000634",
                    "fieldKey": "name",
                    "location": 0,
                    "edit": false,
                    "cutable": false,
                    "fieldDefinition": {
                        "default": "", 
                        "min": "", 
                        "max": "20", 
                        "format": "single", 
                        "attr": "REQUIRED"
                    },
                    "fieldType": "Text",
                    "fieldName": "配置项名称2"
                },
                {
                    "id": "202008250000000000000000000000636",
                    "fieldKey": "name",
                    "location": 0,
                    "edit": false,
                    "cutable": false,
                    "fieldDefinition": {
                        "default": "", 
                        "min": "", 
                        "max": "20", 
                        "format": "single", 
                        "attr": "REQUIRED"
                    },
                    "fieldType": "Text",
                    "fieldName": "配置项名称1"
                }
            ]
        }, 
        {
            "groupName": "基础属性qqqq",
            "edit": false,
            "cutable": false,
            "attr": [
             {
                "id": "20200825000000000000000000000063qq",
                "fieldKey": "name",
                "location": 0,
                "edit": false,
                "cutable": false,
                "fieldDefinition": {
                    "default": "", 
                    "min": "", 
                    "max": "20", 
                    "format": "single", 
                    "attr": "REQUIRED"
            },
            "fieldType": "Text",
            "fieldName": "配置项名称4"
             },
             {
                "id": "2020082500000000000000000000006333",
                "fieldKey": "name",
                "location": 0,
                "edit": false,
                "cutable": false,
                "fieldDefinition": {
                    "default": "", 
                    "min": "", 
                    "max": "20", 
                    "format": "single", 
                    "attr": "REQUIRED"
                 },
                "fieldType": "Text",
                "fieldName": "配置项名称5"
            }
        ]
    }
]

​

效果图：

 

天马行空zqzq
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生实现html5的拖拽功能 drag and drop
凝视深渊
04-25 1803
题目 思路 代码 效果图 拖拽库 HTML5的拖拽API 题目 页面内有一个正方形元素 A 以及一个待放置区域 B，实现对其拖拽和放下到 B 区域内，并且改变 B 区域背景颜色 (不可用 html5 原生事件)。 这也是一道腾讯面试题，要求远程编程。 思路 用鼠标的mousedown事件来模拟dragstart 用持续的mousedown事件来模拟dra...
原生js实现拖拽功能
weixin_47450807的博客
03-09 3953
一、写在前面 如果我们想要实现拖拽的功能，必须要知道三个事件： 1、onmousedown：鼠标按下事件 2、onmousemove：鼠标移动事件 3、onmouseup：鼠标抬起事件 二、实现思路 我们当左键点击时，需要记录当前的鼠标点击位置相对于该元素左上角的x，y坐标， 这里我们使用diffX和diffY来表示。然后我们移动时需要不断计算当前元素距离浏 览器左边和上边的距离。然后给元素进行赋值。当鼠标抬起时，然后取消鼠标移动事 件和鼠标抬起事件。 三、代码 <div id="drag"&g
可拖动网格图片插件-DRAGGABLE IMAGE BOXES GRID
08-12
今天我要给大家介绍的是一款全屏图片网格插件。我们可以用鼠标来拖动图片网格的可视区平滑移动。当我们点击某张图片的时候，该图片会全屏放大以供用户查看。 演示地址：http://www.jq22.com/jquery-info75
原生JS的拖拽属性draggable
最新发布
qq_39237831的博客
03-06 1511
draggable 属性规定元素是否可拖动。链接和图像默认是可拖动的。draggable 属性经常用于拖放操作。draggable 属性是 HTML5 新增的。如果要实现拖放，需要具备以下条件（1）拖动的元素要赋予draggable属性，属性值为true。（2）最重要的三个事件：dragstart、dragover、drop被托动元素A需要设置draggable属性、dragstart事件拖入元素B需要设置dragover、drop事件.one {
html5的drag属性实现拖放
weixin_42560424的博客
06-25 690
需要注意的是，为了防止默认的事件行为（例如在拖拽元素上松开鼠标时跳转到链接地址），我们需要在。它指的是您抓取某物并拖入不同的位置。标准的组成部分：任何元素都是可拖放的。下面我们通过一个例子来实现拖放。在上述示例中，我们给拖拽元素。事件处理函数，给目标元素。
拖拽draggable
weixin_43843679的博客
08-12 152
npm install vuedraggable <template> <div> <draggable :list="list" @end="onDragEnd" element="ul"> <li v-for="(item, idx) of list" :key="idx" >{{item.name}}</li> </draggable
draggable 属性
weixin_34082177的博客
06-15 729
2019独角兽企业重金招聘Python工程师标准>>> ...
原生js实现拖拽功能基本思路详解
10-18
原生JavaScript实现拖拽功能涉及到的几个核心概念和步骤包括：鼠标事件的捕获、鼠标坐标与元素坐标的计算以及元素位置的动态更新。现在，我们将详细解释这些知识点，并结合示例代码来深入理解。 首先，要实现拖拽，...
原生js实现表单拖拽功能
08-29
原生js实现表单拖拽功能,具有单行文本框，多行文本框，日期，单选框，多选框，下拉框，文件上传
原生JS使用Canvas实现拖拽式绘图功能
10-16
原生JS使用Canvas实现拖拽式绘图功能的知识点涵盖了Canvas API的基础应用、面向对象编程思想在Canvas绘图中的运用以及鼠标事件的处理，以下是详细解析： 1. Canvas API基础知识 - Canvas元素：HTML5新增的Canvas...
jQuery响应式可拖拽的元素组件网格布局插件 gridstack.js
09-15
NULL 博文链接：https://zzc1684.iteye.com/blog/2302852
js 实现dragable功能
10-22
可以拖拽控件，放到指定div内，draggable and dropable
原生js实现可拖拽效果
10-20
标签中的“js”指的是JavaScript，“拖拽效果”指代了文章的主题，而“原生js拖拽”则强调使用了原生JavaScript来实现功能，不涉及任何框架。 在提供的部分内容中，文章通过一个HTML实例展示了如何创建一个可拖拽的...
js 实现拖拽功能
qq_28660281的博客
10-23 350
1。首先需要理解 offsetTop offsetLeft offsetHeight offsetParent 含义 offsetTop 相对父元素的位置 //封装拖拽功能 function dragglelog(e) { let odiv = e.target; //获取目标元素 let isMove = $(e.target).attr("nam...
原生拖放 drag
buler_sky的博客
08-18 263
1、知识点 拖动元素依次触发事件：dragstart,drag,dragend 放置元素依次触发事件：dragenter,dragover,dragleave或者drop a、默认图像文本和链接是可拖动的,其他元素若想可拖动需设置draggable="true"； b、因为大部分元素默认是不可放置的，若想放置需要重写drag...
Vue.Draggable实现从左到右拖拽功能
LzzMandy的博客
11-14 3370
功能描述： 1、左边【一级、二级、三级】字样是不能拖拽的，【item1、item2...】可以拖拽 2、左边items位置固定，只能向右拖拽，不能上下拖拽，如：item7从左边拖到右边，左边的item7消失，右边增加item7 3、右边items可以自由拖拽，但不能向左拖拽 4、右边items可以删除，如：点击item7的“×”，右边item7消失，左边item7出现 5、重置时，页...
Vue —— 使用拖拽组件：v-draggerable
月来better
02-15 4272
点击按住红箭头指向的图标可以进行拖拽 1.安装拖拽组件vuedraggable依赖 npm i -S vuedraggable 2.在需要的组件页面中引入改组件 import draggable from "vuedraggable" 3.注册组件 components: { draggable }, <v-row v-if="checkSources"> <v-col cols="3"> <v-subheader><span class=
draggable禁止拖动_Draggable(拖动)组件 属性、事件、方法
weixin_39539764的博客
12-22 4157
Draggable(拖动)即实现页面元素的拖动效果。一、加载方式1.css样式加载：内容部分使用css样式加载Draggable，方便快捷，但是不利于管理，所以我们有课第二种加载方式，使用Jquery方式加载，一般我们都会使用Jquery的方式进行加载。2.Jquery方式加载：//不加属性$('#box').draggable();//JS部分$('#box').draggable({rever...
vuedragable
weixin_33709609的博客
03-07 383
今天使用的场景是一个病人区域（很多病人），给多个病床帮定人。 这是一对多的问题，因此需要多个dragable <div class="iteration-card card-nurse-4 iteration-card-empty"> <draggable class="dragArea " :list="assignedPatients"...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值