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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。