Advertisement

vuedraggable 支持拖拽功能

阅读量:
在这里插入图片描述

项目需求分析

实现一个基础的Vue拖拽示例,将右侧选项区中的元素拖拽至左侧目标区域,成功拖拽后的元素将无法再次移动,并且其颜色会发生变化。

安装 vuedraggable 插件

使用 cnpm 安装 vuedraggable,并将其作为项目依赖项引入。

页面直接引用分析

引入 draggable 模块来自 “vuedraggable”;

components: { draggable },

源码参考

复制代码
    <template>
      <div class="container">
    <div class="content">
      <div class="targetContent">
        <draggable
          :list="resultlists"
          group="article"
          :disabled="disabled"
          @start="targ

全部评论 (0)

还没有任何评论哟~