在vue项目中进行拖拽增加节点

最新推荐文章于 2024-04-27 13:16:47 发布
最新推荐文章于 2024-04-27 13:16:47 发布
阅读量1.3k 收藏 6
点赞数 5
分类专栏： 知识点分享 文章标签： vue js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yunzhan_wurao/article/details/110386028
版权

在vue项目中进行拖拽增加节点

  • 因为项目需要写一个小demo，但是在网上没有找到很合适的，所以就自己用原生拖拽搞了一个，依旧不是很完善，但是还能用，后期可能会用antV的G6来替代，看缘分更新
  • 废话不多说，还是上代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>


<body>
    <div id="app">
        <div id="div1" class="jiedian" @drop='drop($event)' @dragover="draglev">
            <div>
                <ul class="jdlc" v-for="(item,index) in tempList" :key="index" @dragover='allowDrop($event)' >
                    <li style="position: relative;">
                        <span class="tzbtn">{{item.title}}</span>
                        <i class="el-icon-error" @click="closeFn(index)"></i>
                        <div class="dropBox">
                            <div @drop="dragent($event,index,1)"></div>
                            <div @drop="dragent($event,index,2)"></div>
                        </div>
                        
                        <ul v-for="(item,index) in item.children" :key="index">
                            <li>
                                <span>{{item.title}}</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tree">
            <ul v-for="(item,index) in data" :key="index" :draggable="true" @dragstart='drag($event)'>
                <li>
                    <span>{{item.title}}</span>
                    <ul v-for="(item,index) in item.children" :key="index">
                        <li>
                            <span>{{item.title}}</span>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/@better-scroll/core@latest/dist/core.js"></script>
    <script src="https://unpkg.com/@better-scroll/core@latest/dist/core.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    tempList: [
                        {
                            id: '1',
                            title: "节点一",
                            status: true,
                            children: [
                                {
                                    id: '1-1',
                                    title: "节点1-1",
                                    status: true,
                                },
                                {
                                    id: '1-2',
                                    title: "节点1-2",
                                    status: true,
                                }
                            ]
                        },
                        {
                            id: '2',
                            title: "节点二",
                            status: true,
                            children: [
                                {
                                    id: '2-1',
                                    title: "节点2-1",
                                    status: true,
                                },
                                {
                                    id: '2-2',
                                    title: "节点2-2",
                                    status: true,
                                }
                            ]
                        },
                    ],
                    data: [{
                        id: '3',
                        title: '一级 1',
                        status: true,
                        children: [{
                            id: '3-1',
                            title: '二级1',
                            status: true,
                        }
                    ]
                    }, {
                        id: '4',
                        title: '一级 2',
                        status: true,
                        children: [{
                            id: '4-1',
                            title: '二级1',
                            status: true,
                        }, {
                            id: '4-2',
                            title: '二级2',
                            status: true,
                        }]
                    }],
                    defaultProps: {
                        children: 'children',
                        label: 'title'
                    }
                }
            },
            methods: {
                drag: function (e) { //start
                    let target=e.target;
                    let nodeList=e.target.parentNode.children;
                    this.targetIndex=this.tabIndex(target,nodeList);
                },
                drop: function (e) { //end
                    e.preventDefault();
                },
                allowDrop: function (e) { //moving
                    e.preventDefault();
                    e.stopPropagation()
                    console.log(222)
                },
                tabIndex(target,nodeList){
                    for(let i=0;i<nodeList.length;i++){
                        if(target===nodeList[i]){
                            return i;
                        }
                    }
                },
                dragent(e,index,flag){
                    var arr =  this.data
                    if(flag === 1){
                        this.tempList.splice(index,-1,arr[this.targetIndex]);
                    }else if (flag === 2){
                        this.tempList.splice(index+1,0,arr[this.targetIndex]);
                    }
                },
                draglev(){
                    console.log(111)
                },
                closeFn(index){
                    this.tempList.splice(index,1);
                    console.log('del')
                }
            }
        })
    </script>
</body>
<style>
    ul li {
        list-style: none;
    }
    #app {
        width: 800px;
        height: 400px;
        display: flex;
        margin: 0 auto;
    }

    .jiedian {
        width: 700px;
        background: #ccc;
        padding: 40px;
        overflow: auto;
    }
    .jiedian div{
        height: 320px;
        overflow: auto;
        display: flex;
    }

    .jiedian .tzbtn {
        width: 140px;
        height: 20px;
        display: inline-block;
        border: 1px solid #A0A6CD;
        background: #fff;
        border-radius: 20px;
        padding: 10px 0;
        text-align: center;
    }

    .jiedian .jdlc {
        position: relative;
        display: inline-block;
    }
    .jiedian .jdlc li ul {
        position: relative;
    }

    .jiedian .jdlc li ul li {
        height: 32px;
    }

    .jiedian .jdlc li ul li span {
        line-height: 62px;
    }

    .jiedian .jdlc:not(:last-child)::after {
        content: ' ';
        position: absolute;
        left: 182px;
        top: 20px;
        width: 47px;
        border: none;
        border-top: 2px solid #ab9dff;
    }

    .jiedian .jdlc li ul::before {
        content: ' ';
        position: absolute;
        left: 18px;
        height: 100%;
        border: none;
        border-left: 2px solid #ab9dff;
    }

    .jiedian .jdlc li ul li:after {
        content: ' ';
        position: absolute;
        top: 30px;
        left: 20px;
        width: 20px;
        border: none;
        border-top: 2px solid #ab9dff;
    }
    .tree{
        width: 100px;
        background: #eee;
        padding-top: 20px;
    }
    .tree ul{
        width: 100px;
        padding: 0;
        margin-top: 0;
    }
    
    .tree ul li{
        margin-left: 20px;
        position: relative;
    }
    .tree ul li ul li{
        height: 22px;
    }
    .tree ul li ul li span{
        line-height: 38px;
    }
    .tree ul li ul li::after {
        content: ' ';
        position: absolute;
        left: -10px;
        top: 0px;
        height: 21px;
        border: none;
        border-left: 2px solid #ab9dff;
    }
    .tree ul li ul li::before {
        content: ' ';
        position: absolute;
        left: -12px;
        top: 16px;
        height: 6px;
        width: 6px;
        border: none;
        border-radius: 3px;
        background: #ab9dff;
    }
    .dropBox{
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        height: 42px !important;
        width: 100%;
    }
    .dropBox>div{
        flex: 1;
        height: 100%;
    }
    .el-icon-error {
        display: inherit;
    }
    .el-icon-error:before {
    content: "\e79d";
    position: absolute;
    top: -5px;
    right: 5px;
    }
</style>
</html>
yunzhan_wurao
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现树状结构+拖拽
m0_57057282的博客
09-08 1986
然后树组件和树组件对应的拖拽都完成了，该进行拖拽区域的设置了。我这里用到了pubsub.js，相关内容小伙伴可以自行百度。我直接推一手链接，直接用他的最终源码就可以。用到了事件总线总归是有些麻烦的。1.首先说树状结构的实现。menudata结构如下。然后，我这里有一些改动。就这样吧，拍拍手，下播。
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
10-16
主要介绍了利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
撸一个vue项目实现拖拽功能_vue dragover
最新发布
2401_84433535的博客
04-27 183
关于拖放 API 最重要的一个知识点时它将 dataTransfer对象添加到事件中。dataTransfer 对象允许我们在开始拖动元素时设置数据，并在将元素放在拖放区中时访问相同的数据。应该知道一些关于 dataTransfer 的属性和方法（如果要了解更多，请查看dataTransfer API 文档）。
vue拖动实现布局，添加元素，拖拽元素，设置文本大小
11-17
关键点有：单个组件拖动，一行多列里面的组件拖动， 单个组件可以拖入一行多列里， 单个组件的拖动好实现，关键是把一个组件拖动到另一个类似于表格里面，而且有的情况下还需要限制拖动只能在水平方向
Vue3.x中的新增点
guoqkmiss的博客
09-10 1559
Vue3.x中的新增点 1、多根节点组件 在Vue 3中，组件现在正式支持多根节点组件，即片段！ <template> <header>...</header> <main>...</main> <footer>...</footer> </template> 2、Teleport 传送 Teleport提供了一种的方法，使我们可以控制要在DOM中哪个父对象下呈现HTML，而不必求助于全局状态
Vue使用treeTransfer拖拽节点。但不可以跨树型
Along前端开发者
10-26 701
产品提需求，右侧树形需要手动拖拽移动位置，最终保存在库里但不可以跨树型移动，并只可以放置在同级解决思路1、开启可以拖拽属性2、拖拽时，判断当前拖拽的和要放置的位置，为否为同一个pid（需设置同一父级下的节点pid一致）
vue树可拖动拖动项目排序
08-10
首先，"vue-sortable-tree"是一个专门用于Vue.js的树形组件库，它提供拖放排序功能，允许用户通过鼠标拖动节点来调整树形结构中的项目顺序。在安装这个库时，你可以通过npm（Node Package Manager）进行操作： ```...
js\vue版 工作流 节点 连线
12-24
对于初学者来说，通过查看和分析源代码，可以了解如何在实际项目中应用Vue.js进行工作流的可视化设计。 总之，这个“js\vue版 工作流 节点 连线”DEMO展示了如何利用Vue.js来构建一个可交互的工作流编辑器。通过...
vue项目中使用bpmn-自定义platter的示例代码
11-20
本系列教程主要聚焦于如何在Vue环境中集成和使用BPMN，特别是如何进行自定义操作。在这个案例中，我们将关注如何自定义左侧工具栏（platter），创建一个新的“草莓蛋糕”节点。 首先，我们要了解BPMN的基本概念。...
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
10-17
在本文中，我们将探讨如何使用Vue.js和ECharts库来创建一个可拖动节点的折线图，并且支持拖动方向和上下限的设置。首先，我们要了解Vue和ECharts的基本概念。 Vue.js是一个轻量级的前端JavaScript框架，它采用组件...
基于VUE+ElementUI+JsPlumb的流程设计器，通过 vuedraggable 插件来实现节点拖拽
06-26
easy-flow 基于VUE+ElementUI+JsPlumb的流程设计器，通过 vuedraggable 插件来实现节点拖拽。支持拖拽添加节点。点击线进行设置条件。支持给定数据加载流程图。支持画布拖拽。支持连线样式、锚点、类型自定义覆盖。...
vue-slicksort拖拽组件——添加点击事件
Linzsong的博客
12-27 2263
在项目中我个人使用了slicksort和draggable这两个拖拽插件，在这里总结一下slicksort插件的优点，最大的特点个人觉得是很滑（都叫slick sort 翻译过来就是光滑排序）。但在使用该拖拽前，必须先看一下slicksort的demo，看是否满足你个人的需求，毕竟有些需求在slicksort中是不好实现的（如：跨组拖拽，就得用draggable比较好处理） 该插件GitH...
拖拽图标到指定的区域
weixin_30349597的博客
10-13 856
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery...
vue使用Element的Tree树形控件实现拖动改变节点顺序
hhtSeeTheWorld的博客
05-14 4299
项目完成后,产品又提新需求, 通过拖动能够改变下面的组织顺序,又给我增加了好大的工作量! 先吐槽产品一波,怎么早先不想好呢! 首先要想实现拖动改变顺序,那我从后端查询得来的数据 treeList 首先就必须有顺序, 后端为了实现节点有顺序—在实体类中又增加了一个字段 原先类实体 public class OrgNode { private String id; private String name; private String parentId; } 增加了一个brother
Vue.Draggable -- 实现元素拖拽
i_Satan的博客
07-21 630
vuedraggable 元素拖拽
jquery拖拽节点并将节点安装拖拽位置修改
qq_39788860的博客
08-17 1019
效果图 移动到其他节点前面会在这个节点左边框变色加粗，也可以修改其他的方式，有些方法的百度的，目前前端还是菜鸟，个人学习 &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&gt;   
【vue设计与实现】挂载和更新 7-更新子节点
loyd3的博客
08-23 354
注意这里在挂载的时候要区分子节点类型，为什么要区分子节点的类型？其实这是一个规范性问题，因为只有子节点的类型是规范化的，才有利于编写更新逻辑。那么应该怎么规范化vnode.children，在搞清楚这个问题之前，先要搞清楚一个HTML页面中，元素的子节点都有哪些情况。因此渲染器执行更新时，新旧子节点都分别是三种情况之一。因此可以总结出更新子节时有九种可能。（新节点有三种情况，旧节点也有三种情况，组合起来用九种情况）一个元素的子节点无非以下三种情况。如何更新元素的子节点。
【element ui】el-tree拖拽增加样式效果
a965412234的博客
09-30 2238
【element ui】el-tree拖拽增加样式效果
vue d3 鼠标可拖动g 节点怎么写
07-13
你可以使用Vue和D3.js来实现鼠标可拖动的g节点。以下是一个简单的示例代码： 首先，在Vue组件的模板中，你可以创建一个SVG元素，并在其中使用g元素来表示可拖动的节点： ```html <template> <div> <svg width="400" height="300"> <g ref="draggableNode" @mousedown="startDrag" @mousemove="drag" @mouseup="endDrag"> <rect width="50" height="50" fill="blue"></rect> </g> </svg> </div> </template> ``` 然后，在Vue组件的JavaScript部分，你可以使用D3.js来实现拖动功能。在组件的`mounted`生命周期钩子中，你可以选择将g元素转换为D3选择集，并添加相应的事件处理程序： ```javascript <script> import * as d3 from 'd3'; export default { mounted() { const draggableNode = d3.select(this.$refs.draggableNode); this.drag = d3.drag() .on('start', () => { // 拖动开始时的操作 }) .on('drag', () => { const [x, y] = d3.event.subject; draggableNode.attr('transform', `translate(${d3.event.x - x}, ${d3.event.y - y})`); }) .on('end', () => { // 拖动结束时的操作 }); draggableNode.call(this.drag); }, }; </script> ``` 在上面的代码中，`startDrag`、`drag`和`endDrag`
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值