vue拖拽组件vuedraggable使用说明详解

vue拖拽组件vuedraggable的使用说明，供大家参考，具体内容如下

需了解H5的draggable属性，通过下面的代码注释，可了解

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      .box {
        width:500px;
        height: 150px;
        border:1px solid black;
        margin-top: 40px;
      }
    </style>
  
    <script>
      function dragstart(event) {
  
       /*
       * 当拖拽元素时，会触发dragstart事件，拖拽对象是通过事件对象event中的dataTransfer来传输数据的
       * 通过event.dataTransfer.setData("dragContent", event.target.id)
       * 将拖拽对象id存储在dataTransfer中
       * */
        event.dataTransfer.setData("dragContent", event.target.id);
      }
  
      function drop(event){
        event.preventDefault();
        /*
        * 把元素放到目标元素上时，松开鼠标触发drop事件，
        * 通过event.dataTransfer.getData('dragContent')取出刚才存起来的id
        * 然后通过node.appendChild()把拖拽对象放入目标容器中
        * */
        let data = event.dataTransfer.getData('dragContent');
        event.target.appendChild(document.getElementById(data))
      }
  
      function dragover(event) {
        event.preventDefault();
        /*
         * 特别声明：如果不绑定此事件，drop 事件不会触发
         *
         * 虽然已经设定了元素可被拖动，但是浏览器默认地，无法将数据/元素放置到其他元素中。
         * 如果有需要设置某些元素可接受被拖动元素，则要阻止它的默认行为，
         * 这要通过设置该接收元素的ondragover 事件，调用event.preventDefault() 方法
        */
      }
    </script>
  </head>
  <body>
  <!--给元素加上draggable=true 属性，使元素可以被拖动-->
  <div id='dragId' draggable='true' ondragstart="dragstart(event)">我是可以拖拽的文字</div>
  
  <div id='dragboxId' class="box" ondrop="drop(event)" ondragover='dragover(event)'></div>
  
  
  </body>
</html>

vuedraggabe使用说明

首先通过yarn add vuedraggable或者npm i -S vuedraggable安装组件

引入组件并在vue的components 中配置声明

import draggable from 'vuedraggable'
  ...
  export default {
        components: {
            draggable,
        },
  ...

直接通过draggable组件作为被动元素的容器，即可实现内部元素的拖拽

<draggable :list="myArray" group="people" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>vue

多个draggable容器之间拖拽，只需要配置draggable组件的props group为同一个组即可

props 属性之list 就是推拽元素的list

当点击拖拽元素时，拖拽元素会自动加上一个.sortable-chosen的class类名，可通过这个class设置样式（比如背景色）

当把拖拽元素拖到其他位置时，拖拽元素会自动加上一个.sortable-ghost的class类名，可通过这个class设置样式（比如背景色）

draggable组件内还可以加 header slot / footer slot 此时需要在draggable组件上加上draggable=".item"，通过设置可拖拽元素的class，显示表示组件内部哪些元素可以拖拽

<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="footer" @click="addPeople">Add</button>
</draggable>

结尾：以上就是draggable的简单使用说明，可以满足基本的拖拽需求，如有错误，望大佬不吝指正。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vuedraggable+element ui实现页面控件拖拽排序效果

    项目要实现一些控件的拖拽排序.从而找到了这款vuedraggable控件,供大家参考,具体内容如下 如上图要实现这些控件的拖拽排序 这是拖拽后 由于公司网络的原因,项目没有使用npm,都是使用的引入的js <script type="text/javascript" src="lib/sortable/Sortable.min.js"></script> <script type="text/javascript"

  • Vue 实现可视化拖拽页面编辑器

    Vue 实现可视化拖拽页面编辑器

    在线地址 (用梯子会更快些) 可视化页面编辑器,听起来可望不可即是吧,先来张动图观摩观摩一番! 实现这功能之前,在网上参考了很多资料,最终一无所获,五花八门的文章,都在述说着曾经的自己! 那么,这时候就需要自己去琢磨了,如何实现? 需要考虑到: 拖拽的实现 数据结构的定义 组件的划分 可维护性.扩展性 对象的引用:在这里是我感觉最酷的技巧了,来一一讲解其中的细节吧!! 拖拽实现 拖拽事件 这里使用 H5的拖拽事件 ,主要用到: dragstart // 开始拖拽一个元素时触发 draggable

  • vue3使用vuedraggable实现拖拽功能

    vue3使用vuedraggable实现拖拽功能

    本文实例为大家分享了vue3使用vuedraggable实现拖拽功能的具体代码,供大家参考,具体内容如下 1.npm i vuedraggable -S,使用这个命令,vue3会报错,如下图 2.使用npm uninstall vuedraggable -S 卸载,再使用npm i -S vuedraggable@next下载最新版 3.vue使用代码如下: <template>   <div>     <h1 class="title">拖拽<

  • vue悬浮可拖拽悬浮按钮的实例代码

    前言 vue开发手机端悬浮按钮实现,可以拖拽,滚动的时候收到里边,不影响视线 github地址 使用,基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装,构建手机端模板脚手架 vue-h5-template 后续将发布各种商城组件组件,让商城简单高效开发 线上体验 使用 将 src/components文件夹下的s-icons组件放到你的组件目录下 使用组件 // template <template> <div> <

  • vuedraggable实现拖拽功能

    vuedraggable实现拖拽功能

    本文实例为大家分享了vuedraggable实现拖拽功能的具体代码,供大家参考,具体内容如下 一.下载依赖 npm i -S vuedraggable 二.代码块 <template>     <div>     <a-checkbox-group @change="onChange">         <draggable  group="people"             class="list-group

  • vue拖拽排序插件vuedraggable使用方法详解

    vue拖拽排序插件vuedraggable使用方法详解

    大家好,最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入 首先在vue项目中,用npm包下载下来 npm install vuedraggable -S 下载下来后,引入插件,在你的vue文件的script标签里面这样引入 import draggable from 'vuedraggable' 别忘了下面要注册组件 components: { dr

  • Vue 基于 vuedraggable 实现选中、拖拽、排序效果

    今天有个朋友说要做个效果:Vue实现拖拽排序,要有 checked,输出结果是排序后的,要全选,未选中的不能拖动. 其实我之前基于 Sortable 做过一个类似的效果.也给他看过了,没看太明白,他就自己基于 vuedraggable 实现了一下. 正好有点问题给他解决了一下.废话不多说,先上最终效果:Vue 拖拽排序效果 测试地址.下面就是最终效果图. 效果一:实现选中 和 全选效果 就下面这样,elementUI 官方 Demo.很简单毫无挑战呀. <el-checkbox :indeter

  • vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序

    vue拖拽克隆clone组件API, vue.draggable实现盒子之间相互拖拽排序克隆(网上资源整理的文档) 效果图: -------------------------------------------------------------------------------- 首先需要安装vuedraggable依赖包: npm install vuedraggable --save 因为拖拽组件依赖sortablejs ,如果项目没有安装sortablejs ,可能需要安装一下 np

  • 使用vuedraggable实现从左向右拖拽功能

    使用vuedraggable实现从左向右拖拽功能

    本文实例为大家分享了使用vuedraggable实现从左向右拖拽的具体代码,供大家参考,具体内容如下 1 功能描述 使用vuedraggable实现从左边框中拖拽到右边的框中,左边的框不能随意拖拽改变位置,不能向左边框中拖拽组件.右边框中的组件可以拖动位置,但不能拖入到左边框里. 注意事项如下: (1)draggable的group中的name属性必须一致: (2)左边框中的draggable必须含有以下属性,group中的pull:'clone'属性表示可以生成新的组件:group中的put:

  • vue拖拽组件vuedraggable使用说明详解

    vue拖拽组件vuedraggable的使用说明,供大家参考,具体内容如下 需了解H5的draggable属性,通过下面的代码注释,可了解 <!DOCTYPE html>   <html lang="en">   <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-widt

  • Vue拖拽组件开发实例详解

    为什么选择Vue? 主要原因:对于前端开发来说,兼容性是我们必须要考虑的问题之一.我们的项目不需要兼容低版本浏览器.项目本身也是一个数据驱动型的.加之,Vue本身具有以下主要特性: •使用虚拟DOM: •轻量级框架: •高效的数据绑定: •灵活的组件系统: •完整的开发生态链. 这就是我们为什么选择Vue框架的一些原因. 为什么要封装成一个Vue组件? 主要目的是可提高代码的复用性和可维护性. •复用性:组件化后,一些样式和逻辑均通过配置参数的方式去差异化体现,所以参数的可配置性提高了组件的复用

  • vue拖拽组件使用方法详解

    vue拖拽组件使用方法详解

    前言 pc端开发需要拖拽组件完成列表的顺序交换,一般移动端的UI组件会包含,但是我在用的iview并没有此功能的组件,于是手写一个,实现起来很简单.效果图如下: 可以拖拽完成新排序,点击某一项可以触发相关事件. 关于拖拽 drag & drop 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖拽对象 dataTransfer对象,只能在拖放事件的事件处理程序中访问.重要属性: effectAllowed ( none | copy | copyLink | copyMove |

  • vue选项卡Tabs组件实现示例详解

    目录 概述 效果图 实现过程 组件分析 所需的前置知识 项目组件文件夹 Tabs.vue TabPane.vue render.js index.js 使用 总结 概述 前端项目中,多数页面涉及到选项卡切换,包括路由切换,指令v-if等,本质上其实和选项卡切换思想差不多,如果是个简单的选项卡,还是很简单的,我们也不需要什么组件库的组件,自己也能几行代码写出来,但是涉及到动画,尺寸计算,拖拽的功能的时候,多数情况下,自己写还是要花点时间的,组件库就提供了现成的,拿来改改样式就行,为了对这个组件更加

  • Vue拖拽组件列表实现动态页面配置功能

    Vue拖拽组件列表实现动态页面配置功能

    需求描述 最近在做一个后台系统,有一个功能产品需求是页面分为左右两部分,通过右边的组件列表来动态配置左边的页面视图,并且左边由组件拼装起来的视图,可以实现上下拖拽改变顺序,也可以删除. 根据这个需求我做了下面这个demo. 功能分解 右边的组件列表,可以通过拖拽克隆到左边,拖拽结束后右边组件列表数量不会减少 左边的组件可以展开或收起 左边的组件可以上下拖拽,删除,但不可向右边拖拽 左边组件拖拽过程中不改变其展开和收起状态 demo截图 代码地址 vue-draggable-list 代码预览 <

  • 原生js实现拖拽功能基本思路详解

    如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒. 1.onmousedown:鼠标按下事件 2.onmousemove:鼠标移动事件 3.onmouseup:鼠标抬起事件 拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素.鼠标的移动也就是x.y坐标的变化;元素的移动就是style.position的 top和left的改变.当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下的. 基本思路如下: 拖拽状态

  • Vue创建头部组件示例代码详解

    Vue.js 组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title

  • vue动态注册组件实例代码详解

    写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的. is 预期:string | Object (组件的选项对象) 用于动态组件且基于 DOM 内模板的限制来工作. 示例: <!-- 当 `currentView` 改变时,组件也跟着改变 --> <component v-bind:is="currentView"></component> 详见vue API中关于

  • 微信小程序移动拖拽视图-movable-view实例详解

    JS中的sender参数(sender是事件的传值)前提是只有一个touch移动的时候.多个touch需要在 changedTouches 数组中查找 redclcik:function(sender){ wx.showModal({ title: '点击红色', content: '', }) console.log(sender); }, redmove:function(sender){ console.log(sender); // console.log(sender.changedT

随机推荐