首页 > 网络编程 > JavaScript > 正文

vue 中基于html5 drag drap的拖放效果案例分析_vue.js

2018-11-10 10:00:55

 事情是这样的,右边有各种控件,可以拖动到右边自由区,在自由区内可以随意拖动。

案例一:

开始的我,so easy! 通过绑定元素的mousedown 事件,监听鼠标的mousemove,和mouseup 事件,于是我轻松实现了同一区域内元素可以拖着跑,上代码!

move (e) {  let odiv = e.target // 获取目标元素  // 算出鼠标相对元素的位置  let disX = e.clientX - odiv.offsetLeft  let disY = e.clientY - odiv.offsetTop  document.onmousemove = e => {  // 鼠标按下并移动的事件  // 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置  let left = e.clientX - disX  let top = e.clientY - disY  // 移动当前元素  odiv.style.left = left + 'px'  odiv.style.top = top + 'px'  }  document.onmouseup = e => {  document.onmousemove = null  document.onmouseup = null  } } 

  注意一点,被拖拽对象区域要设置position:relative, 否则的元素会自己抖动。

以上代码并不能满足需要,要左右布局,左边的拖到右边,在右边区域随便拖动。

案例二:

好吧,首先我来布个局,左右布局,给元素绑定事件,上代码!

<template> <div style='position: relative;'> <el-container>  <el-aside width="300px">  <ul>   <li class='liStyle' v-for="item in tags" :key='item.id'><img src="../assets/timg.png" class='msg' alt="" @dragstart="dragstart" draggable="true" @drag='draging' @dragend="dragend"></li>  </ul>  </el-aside>  <!-- 自由移动区域 -->  <el-main>  <div @drop="drop" @dragover.prevent style='height:600px;width:800px;'>  </div>  <!-- <svg id="svgDrag" width="1200" height="1000"></svg> -->  </el-main> </el-container> </div></template> 

事件绑定方法:

dragstart (ev) {  console.log('dragstart拖拽开始事件,绑定于被拖拽元素上', event)  ev.dataTransfer.setData('Text', ev.target.id)  this.offsetX = ev.offsetX  this.offsetY = ev.offsetY  console.log(this.offsetX + '-' + this.offsetY) }, draging (e) {  // console.log('拖动中')  var x = e.clientX  var y = e.clientY  // console.log('shubiao client')  if (x > 300) {  console.log(this.tags)  // drag事件最后一刻,无法读取鼠标的坐标,pageX和pageY都变为0  if (x === 0 && y === 0) {   return // 不处理拖动最后一刻X和Y都为0的情形  }  x -= this.offsetX  y -= this.offsetY  // console.log('e left')  // console.log(x + '-' + y)  /* 它的父级第一个存在定位的元素,如果有margin减去margin值 */  e.target.style.left = x - 5 + 'px'  e.target.style.top = y - 60 + 'px'  } }, drop (ev) {  console.log('drop拖放事件,绑定可拖放区域', event)  this.text = ev.dataTransfer.getData('Text')  console.log(this.text)  let target = document.getElementById(this.text)  ev.target.appendChild(target)  ev.preventDefault() }, dragend (event) {  event.dataTransfer.clearData() } 

  如果不出意外的话,以上代码已经成功实现了元素从左边拖到右边。但是,右边元素被拖走了,右边就没有了,然后我尝试了各种,拖动开始时clone 元素,drap时clone元素等等,都不太完美。此时的我,崩溃……

终于,也不知道哪来的灵感,这个困扰我两秒的难题突然就被我成功攻克了。好了,我要开始吹牛了……

  案例三:

       我的思路是这样的(不想看?直接看代码好了,反正是给我自己看的):左边列表元素可拖动(draggable='true'),绑定dragstart(开始事件),不要给它绑定draging(拖动事件),这样左边列表元素有拖动属性,但是位置不会改变。当右侧拖动区域

第一次触发了drop 操作后,新生成一个对象,这个对象既有拖动(draggable='true')属性,也绑定dragstart(开始事件),拖动事件(drag),这样新元素会在右侧随意拖动。那么怎么新生成一个元素呢?自然不是appendChild 之类的,利用Vue 双向绑定的特性,

页面上循环数组元素,生成元素即往数组中push 元素即可。每次拖动元素都会触发drop 事件,并不是每次都要生成一个新元素,要知道是从左边列表拖到右侧第一次drop 的时候生成新元素。怎么知道呢?这就是两个dragstart的妙处

<t<template> <div style='position: relative;'> <el-container>  <el-aside width="300px">  <ul>   <li class='liStyle' v-for="item in tags" :key='item.id'>   <img src="../assets/timg.png" class='msg' alt="" @dragstart="dragstart" draggable="true" :id='item.id' @dragend="imgEnd">   </li>  </ul>  </el-aside>  <el-main>  <div @drop.prevent="drop" @dragover.prevent style='height:1000px;width:1800px;'>   <img src="../assets/timg.png" class='msg' :style="{left:item.x+'px',top:item.y+'px'}" alt="" v-for="(item, $index) in InfoList" :key='$index' @dragstart="imgStart" draggable="true" @drag='draging($event,item)' @dragend="imgEnd">  </div>  </el-main> </el-container> </div></template> methods: { dragstart (ev) { let info = { id: ev.target.id, isDrop: true } ev.dataTransfer.setData('Text', JSON.stringify(info)) this.offsetX = ev.offsetX this.offsetY = ev.offsetY }, drop (e) { let info = JSON.parse(e.dataTransfer.getData('Text')) /* 判断是否是第一次进入拖拽区域,如果是第一次需要新生成对象,否则不需要 */ if (info.isDrop) {  var x = e.clientX  var y = e.clientY  x -= this.offsetX  y -= this.offsetY  info.x = x - 5  info.y = y - 60  info.id = info.id + Date.parse(new Date())  this.InfoList.push(info) } }, imgStart (e) { let info = { isDrop: false } e.dataTransfer.setData('Text', JSON.stringify(info)) this.imgOffsetX = e.offsetX this.imgOffsetY = e.offsetY }, draging (e, item) { item.x = e.clientX - this.imgOffsetX - 5 item.y = e.clientY - this.imgOffsetY - 60 }, imgEnd (event) { console.log('done') console.log(event) event.dataTransfer.clearData() }} 

  注意:拖动元素设置position:absolute属性

总结

以上所述是小编给大家介绍的vue 中基于html5 drag drap的拖放效果案例分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • vue使用drag与drop实现拖拽的示例代码
  • Vue.Draggable实现拖拽效果
  • Vue.js实现拖放效果的实例
  • 相关标签:JavaScript
  • 本文发布HTML5中文学习网 ,转载请注明出处,感谢您!
  • 相关文章


  • Asp.net Core与类库读取配置文件信息的方法_实用技巧
  • asp.net在Repeater嵌套的Repeater中使用复选框详解_实用技巧
  • 利用IIS调试ASP.NET网站程序的完整步骤_实用技巧
  • Asp.Net Core轻松学习系列之配置文件_实用技巧
  • ASP.NET 页生命周期概述(小结)_实用技巧
  • 详解ASP.NET Core WebApi 返回统一格式参数_实用技巧
  • 2018年网络流行语有哪些?2018年十大网络流行语盘点
  • 华为首席财务官孟晚舟被暂扣 深圳市政府要求加方立即放人!
  • 微信支付勒索病毒制造者被锁定 网友:史上最蠢的黑客!
  • 英国电信宣布从核心设备中删除华为产品 5G不采用
  • 独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    kevin

    永远在学习的路上!

    相关教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 热门教程