国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

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

2019-11-19 12:35:54
字體:
供稿:網(wǎng)友

 事情是這樣的,右邊有各種控件,可以拖動到右邊自由區(qū),在自由區(qū)內(nèi)可以隨意拖動。

案例一:

開始的我,so easy! 通過綁定元素的mousedown 事件,監(jiān)聽鼠標(biāo)的mousemove,和mouseup 事件,于是我輕松實(shí)現(xiàn)了同一區(qū)域內(nèi)元素可以拖著跑,上代碼!

move (e) {  let odiv = e.target // 獲取目標(biāo)元素  // 算出鼠標(biāo)相對元素的位置  let disX = e.clientX - odiv.offsetLeft  let disY = e.clientY - odiv.offsetTop  document.onmousemove = e => {  // 鼠標(biāo)按下并移動的事件  // 用鼠標(biāo)的位置減去鼠標(biāo)相對元素的位置,得到元素的位置  let left = e.clientX - disX  let top = e.clientY - disY  // 移動當(dāng)前元素  odiv.style.left = left + 'px'  odiv.style.top = top + 'px'  }  document.onmouseup = e => {  document.onmousemove = null  document.onmouseup = null  } } 

  注意一點(diǎn),被拖拽對象區(qū)域要設(shè)置position:relative, 否則的元素會自己抖動。

以上代碼并不能滿足需要,要左右布局,左邊的拖到右邊,在右邊區(qū)域隨便拖動。

案例二:

好吧,首先我來布個局,左右布局,給元素綁定事件,上代碼!

<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>  <!-- 自由移動區(qū)域 -->  <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事件最后一刻,無法讀取鼠標(biāo)的坐標(biāo),pageX和pageY都變?yōu)?  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拖放事件,綁定可拖放區(qū)域', 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() } 

  如果不出意外的話,以上代碼已經(jīng)成功實(shí)現(xiàn)了元素從左邊拖到右邊。但是,右邊元素被拖走了,右邊就沒有了,然后我嘗試了各種,拖動開始時clone 元素,drap時clone元素等等,都不太完美。此時的我,崩潰……

終于,也不知道哪來的靈感,這個困擾我兩秒的難題突然就被我成功攻克了。好了,我要開始吹牛了……

  案例三:

       我的思路是這樣的(不想看?直接看代碼好了,反正是給我自己看的):左邊列表元素可拖動(draggable='true'),綁定dragstart(開始事件),不要給它綁定draging(拖動事件),這樣左邊列表元素有拖動屬性,但是位置不會改變。當(dāng)右側(cè)拖動區(qū)域

第一次觸發(fā)了drop 操作后,新生成一個對象,這個對象既有拖動(draggable='true')屬性,也綁定dragstart(開始事件),拖動事件(drag),這樣新元素會在右側(cè)隨意拖動。那么怎么新生成一個元素呢?自然不是appendChild 之類的,利用Vue 雙向綁定的特性,

頁面上循環(huán)數(shù)組元素,生成元素即往數(shù)組中push 元素即可。每次拖動元素都會觸發(fā)drop 事件,并不是每次都要生成一個新元素,要知道是從左邊列表拖到右側(cè)第一次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')) /* 判斷是否是第一次進(jìn)入拖拽區(qū)域,如果是第一次需要新生成對象,否則不需要 */ 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() }} 

  注意:拖動元素設(shè)置position:absolute屬性

總結(jié)

以上所述是小編給大家介紹的vue 中基于html5 drag drap的拖放效果案例分析,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持!

發(fā)表評論 共有條評論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 大厂| 万年县| 新晃| 临武县| 陈巴尔虎旗| 大渡口区| 临漳县| 康乐县| 故城县| 日照市| 资源县| 子长县| 桑日县| 克什克腾旗| 泸溪县| 七台河市| 余姚市| 临沧市| 商河县| 万盛区| 门源| 桐城市| 韶山市| 黑山县| 平昌县| 元谋县| 武安市| 阿拉尔市| 泰州市| 高碑店市| 景洪市| 虹口区| 乃东县| 贺兰县| 土默特右旗| 边坝县| 托克逊县| 保靖县| 台江县| 亳州市| 沙洋县|