vue 实现拖拽插件,vue拖拽插件

　　本文主要介绍如何使用vue自定义命令构建拖拽插件，帮助大家更好的理解和学习使用vue。感兴趣的朋友可以了解一下。

　　我们都知道html5的拖拽特性，使用它可以轻松实现拖拽功能。比如，有些选择操作场景比鼠标点击更容易让用户接受和理解拖放。今天，我们将利用这一特性，结合vue的自定义指令，实现一个简单但实用的拖放插件。

　　为什么叫外挂？因为我们的目标不是开发一个vue组件，而是开发两个vue的自定义指令，最终这两个自定义指令会封装成一个es6的类，在实际项目中很容易使用。

　　大多数拖放场景都涉及到将一些要选择的元素从A区拖放到b区，这里涉及到两个概念，一个是可拖动的，另一个是可放置的。要选择的元素必须是可拖动的，目标区域(容器)必须是可放置的。

　　如果我们开发一个拖放式的vue组件或者可放置组件，只是这个组件可以拖放而已。此时，如果需求发生变化，另一个组件需要支持拖放，我们仍然需要为另一个组件编写拖放代码。或者其他项目也需要拖拽功能，我们要重新开发。这不利于维护和重用，vue的自定义指令帮助我们解决了这个问题。我们只需要给组件(包括常用的dom元素)添加自定义指令，就可以让这个组件(元素)拖拽，这样就可以灵活使用了。

　　除了核心功能的默认内置指令(v-model和v-show)，Vue还允许注册自定义指令。注意，在Vue2.0中，代码重用和抽象的主要形式是组件。但是，在某些情况下，您仍然需要对普通DOM元素执行低级操作，然后您将使用自定义指令。

　　综上所述，本文的目标需要完成两个自定义指令：

　　垂直拖动允许拖动组件。

　　V-drop允许放置元件。

　　目标明确，那就开始吧！因为我们想让这两条指令在任何组件上工作，所以我们需要注册Vue全局指令。

　　Vue.directive(drag ，{

　　bind(el，binding，vnode){

　　//当指令第一次绑定到元素时，只调用一次。

　　//这里可以进行一次初始化。

　　}

　　})

　　Vue.directive(drop ，{

　　bind(el，binding，vnode){

　　//

　　}

　　})

　　如果您的项目是由vue-cli构建的，您可以在main.js中的vue初始化的顶部编写此代码

　　首先，我们在拖动指令的绑定钩子中编写代码。bind只调用一次，当指令第一次绑定到一个元素时调用，所以我们使用bind钩子。这条指令的目标是使组件(元素)可拖动，所以我们将el的drag设置为true。

　　el.draggable=true

　　el.ondragstart=(event)={

　　event . data transfer . setdata( Text ，您的数据.);

　　}

　　拖动元素时，首先会触发ondragstart事件。通常，我们在这个事件中为事件的dataTransfer设置拖动数据，这样当元素被放置时，目标容器就可以获得拖动的数据。如果拖放不能传输数据，那就没有意义了。上面的代码调用dataTransfer的setData方法来设置拖动数据。setData的参数1表示数据类型，参数2表示要传输的数据。

　　遗憾的是，拖动数据目前只支持字符串。如果要传递复杂的对象，可以序列化数据。

　　接下来，我们为drop指令的绑定钩子编写代码。这条指令的目的是使组件(元素)可放置，所以我们需要为元素的ondragover(拖动事件)和ondrop(放置事件)编写处理程序。这两个处理程序想要阻止事件的默认行为。

　　el.ondragover=(event)={

　　event . prevent default()；//阻止默认行为

　　}

　　el.ondrop=(event)={

　　event . prevent default()；

　　let dragData=event . data transfer . get data( Text )；//获取拖动数据

　　}

　　我们可以通过event.dataTransfer的getData方法获取拖放开始事件中的拖放数据集

　　现在您可以将这两条指令添加到任何组件中。带有v形拖动的组件可以被拖动，带有v形放下的组件可以放置和接收拖动数据。

　　我的组件v型阻力/我的组件

　　我的容器垂直下降/我的容器

　　新的问题来了。我们通过拖放来传输数据。但是，在数据传输的初始阶段，我们在自定义命令drag的bind hook中进行，在接收阶段，我们在drop的bind hook中进行。那么，数据从何而来？去哪里？很明显，数据应该来自一个组件，然后传递给另一个组件，否则我们给vue组件写指令就没有意义了。

　　幸运的是，自定义指令的钩子函数为我们提供了最简单有效的访问组件的方法：那就是钩子函数的第三个参数vnode。vnode的一个属性是componentInstance，这个componentInstance就是自定义指令的宿主：vue组件实例！

　　接下来，就简单了。我们只需要定义一个接口来获取添加了v-drag的组件的拖动数据，并定义一个接口来接收添加了v-drop的组件的拖动数据。虽然vue组件不支持接口的定义，但是我们可以在这两个方法的名称上达成一致，并在组件的方法中实现。

　　//自定义组件的内部

　　方法：{

　　GetDragData(){//Contract GetDragData作为接口方法获取组件的拖动数据。

　　返回this.id//假设拖动这个组件时，需要传出id

　　}

　　SetDragData(data){ //收缩组件接收拖动数据的SetDragData的接口方法。

　　this.appendNewChildById(数据)；//假设这个组件接收到id来生成一个新元素

　　}

　　}

　　然后重写我们的自定义指令设置和传递拖放数据的代码：

　　设drag value=“”；

　　if(vnode . component instance . getdragdata！=未定义){

　　drag value=vnode . component instance . getdragdata()；

　　}

　　event . data transfer . setdata( Text ，drag value)；

　　垂直下降指令中的Ondrop事件

　　let drag value=event . data transfer . get data( Text )；

　　if(vnode . component instance . setdragdata！=未定义){

　　vnode . component instance . setdragdata(drag value)；

　　}

　　我们在访问组件的接口方法时添加if判断，因为如果没有接口的约束，组件可能无法实现这些方法。

　　好了，到目前为止，我们已经完全实现了组件拖拽的自定义命令。虽然很简单，但是非常实用灵活，基本可以满足日常拖拽的需求。我们来总结一下整个过程吧！

　　全局命令垂直拖动、垂直放下

　　被拖动的组件实现获取数据的接口方法。

　　所需的组件实现接收数据的接口方法。

　　拖动指令访问组件的接口方法来获取数据。

　　指示删除访问组件的接口方法来传输数据。

　　我们将全局自定义指令的相关代码封装到es6的一个类中，作为单独的js文件放入项目中，或者发布到npm中，然后在main.js中导入这个类，调用静态初始化方法，完成全局指令的注册。这样，项目中的任何组件都可以使用v-drag和v-drop。上面总结的五个步骤只需要在第2条和第3条中执行。

　　这就是如何使用vue自定义指令构建拖放插件的细节。更多关于vue自定义指令构建拖拽插件的信息，请关注我们的其他相关文章！

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