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