Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Drag vue items</title>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style>
        .wrapper {
            margin: 0 auto;
            max-width: 400px;
        }

        .list-items__ul {
            max-width: 300px;
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        .list-item__title {
            display: block;;
            padding: 10px;
            border-radius: 5px;
            background: gray;
            border: none;
            color: white;
        }

        .list-item {
            margin-top: 10px;
            display: block;
        }

        .list-item > ul {
            margin-left: 15px;
        }

        .list-item.placeholder {
            border: none;
            background: #d1fffd;
            opacity: 0.5;
            border-radius: 5px;
        }

        .list-item.dragging .list-item__title {
            background: blue;
        }

        .list-item.drag-over .list-item__title {
            background: green;
        }

        .list-item__handle_drag {
            display: inline-block;
            float: right;
            padding: 2px 5px;
            cursor: all-scroll;
        }

    </style>
</head>
<body>

<div class="wrapper">
    <div id="app">
        <h1>{{ message }}</h1>
        <list-dragable
                :list-items="listItems">
        </list-dragable>
    </div>
</div>

<script src="https://unpkg.com/vue"></script>

<script type="text/x-template" id="item-dragable-template">
    <li class="list-item list-item__dragable">
        <div class="list-item__title">
            {{model.text}}
            <div class="list-item__handle_drag">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </div>
        </div>
        <ul class="list-items__ul" v-if="model.children !== undefined && model.children.length > 0">
            <item-dragable
                    v-for="item in model.children"
                    :model="item">
            </item-dragable>
        </ul>
    </li>
</script>

<script type="text/x-template" id="list-dragable-template">
    <div class="list-items">
        <ul class="list-items__ul">
            <item-dragable
                    v-for="item in listItems"
                    :model="item">
            </item-dragable>
        </ul>
    </div>
</script>

<script>
    var data = [{
        text: 'My Tree',
        children: [
            {text: 'hello'},
            {text: 'wat'},
            {
                text: 'child folder',
                children: [
                    {
                        text: 'child folder',
                        children: [
                            {text: 'hello'},
                            {text: 'wat'}
                        ]
                    },
                    {text: 'hello'},
                    {text: 'wat'},
                    {
                        text: 'child folder',
                        children: [
                            {text: 'hello'},
                            {text: 'wat'}
                        ]
                    }
                ]
            }
        ]
    }];

    Vue.component('itemDragable', {
        template: '#item-dragable-template',
        props: {
            model: Object
        }
    });

    Vue.component('listDragable', {
        template: '#list-dragable-template',
        props: {
            listItems: Object
        }
    });

    // boot up the demo
    var demo = new Vue({
        el: '#app',
        data: function () {
            return {
                listItems: data
            }
        }
    })
</script>
</body>
</html>