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拖放功能的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！