vue可以拖动的布局,vue实现拖拽可视化

  vue可以拖动的布局,vue实现拖拽可视化

  本文主要介绍如何使用vue.js实现拖放功能。本文没有使用现有的库,而是使用内置的HTML拖放API来实现一个简单的拖放系统。有需要的朋友可以参考一下。

  

前言

  添加拖放功能是让你的程序更加自然友好的一种方式。虽然有一些库提供了拖放功能,但是了解它们在底层是如何工作的还是很有意义的。

  在本文中,我们将使用内置的HTML拖放API来实现一个简单的拖放系统。像这样:

  

拖放API

  HTML拖放API是一个内置的方法。它包含几个事件和属性,但可以总结为两种类型的元素。

  可拖动元素:可以拖动的元素。

  可放置元素:可以接受被拖动元素的元素。

  如果以这种方式分析,将更容易分析拖放事件。

  拖放事件

  API中有八个拖放事件可以在我们的程序中使用。

  拖动:可拖动的项目被拖动。

  Dragstart:开始拖动可拖动元素。

  拖动结束:拖动结束(例如释放鼠标)

  Dragenter:被拖动的项目进入可放置的元素。

  drag leave可拖动的项目会留下可放置的元素。

  Dragover:拖动项目在可放置的元素上移动(大约每100毫秒调用一次)

  拖放:一个可拖动的项目被放置在一个可放置的元素上。

  dataTransfer对象

  关于拖放API的一个最重要的知识点是,它将dataTransfer对象添加到事件中。

  DataTransfer对象允许我们在开始拖动元素时设置数据,并在将元素放入拖放区时访问相同的数据。

  我们应该了解一些关于dataTransfer的属性和方法(如果想了解更多,请查看dataTransfer API文档)。

  DropEffect:当前的拖放操作(例如,移动、复制)

  effectAllowed:指定拖放操作。

  SetData(name,val):允许我们向dataTransfer对象添加值。

  GetData(name):检索存储的值。

  

创建自己的拖放系统

  如您所见,示例中有两个列表,我们可以在它们之间平稳地拖放项目。

  配置我们的项目

  首先,我们要设置数据。在脚本中,创建一个具有以下属性的item对象数组:

  Id:唯一的ID,以便我们可以找到对象

  标题:要显示的文本

  列表:它所属的列表。

  我决定在这个数组中添加三个项目:

  data () {

  返回{

  项目:[

  {

  id: 0,

  标题: A项,

  列表:1

  },

  {

  id: 1,

  标题:“B项”,

  列表:1

  },

  {

  id: 2,

  标题:“C项”,

  列表:2

  }]

  }

  }

  此外,还创建了两个计算属性来将项目列表过滤为列表1中的项目和列表2中的项目。

  计算值:{

  listOne () {

  返回this . items . filter(item=item . list===1)

  },

  listTwo () {

  返回this . items . filter(item=item . list===2)

  }

  }

  创建计算属性比在v-for中使用v-if更好。

  创建的模板代码

  这是组件的轮廓。代码将显示所有内容,但没有拖放功能。

  模板

  差异

  div class=拖放区

   div v-for= listOne中的项目:key=item.title class=drag-el

  {{ item.title }}

  /div

  /div

  div class=拖放区

   div v-for= list two中的项目:key=item.title class=drag-el

  {{ item.title }}

  /div

  /div

  /div

  /模板

  组件的样式并不重要。重要的是,即使没有内部元素,你的拖放区也必须有一定的高度,否则,你不能把鼠标悬停在上面!

  样式范围。拖放区{

  背景色:# eee

  边距-底部:10px

  填充:10px

  }。拖曳-el {

  背景色:# fff

  边距-底部:10px

  填充:5px

  }

  /风格

  这是通过向拖放区样式添加一些填充来实现的。

  添加拖放功能

  首先,在脚本中添加一些方法:一个在开始拖动元素时使用,另一个在拖放元素时使用。

  对于startDrag方法,我们希望使用前面讨论的dataTransfer属性来存储要拖动的元素的ID。此外,这个拖动事件将是一个动作。

  startDrag: (evt,item)={

  evt . data transfer . drop effect= move

  evt . data transfer . effect allowed= move

  evt . data transfer . setdata( itemID ,item.id)

  }

  然后在ondrop中检索存储的ID,以便我们可以访问数组中的正确项目。

  onDrop (evt,list) {

  const itemID=evt . data transfer . get data( itemID )

  const item=this . items . find(item=item . id==itemID)

  item.list=list

  }

  添加下面的模板代码。

  首先,向事件添加一个事件。使所需的元素可拖动,并检测拖动开始事件。

  差异

  拖拉,拖拉

  v-for= list two中的项目

  :key=item.title

  可拖动的

  @dragstart=startDrag($event,item)

  {{ item.title }}

  /div

  得益于draggable属性的加入,如果运行程序,应该可以像这样拖动元素,但是不能拖动到任何地方。

  让我们给它一个接受可拖动元素的拖放区。添加一个首先调用onDrop方法的drop事件侦听器。

  差异

  空投区

  @drop=onDrop($event,1)

  但是注意,我们必须在拖放挂钩、dragEnter和dragOver上调用preventDefault。

  因为默认情况下,这两种方法都不允许删除元素。因此,为了使我们的drop事件正常工作,我们必须防止它的默认操作。

  你可以通过Vue的内置来实现。防止事件修饰符。

  差异

  空投区

  @drop=onDrop($event,1)

  @dragover.prevent

  @dragenter.prevent

  现在运行程序,你可以看到一切正常。我们能够在两个不同的列表之间拖放元素。

  

总结

  虽然这个例子非常简单,但是它可以帮助你理解HTML拖放API是如何工作的。其实没你想的那么难。

  关于如何使用vue.js实现拖拽功能的这篇文章到此为止。关于vue.js拖放功能的更多信息,请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: