<template>

	    <section class="main">
        <div class="drag-box-left">
            <div class="drag-title">{{$t('objFill.v101.tuodongpxu')}}</div>
            <div class="drag-list" draggable="true"
                v-for="list in data1"
                :data-id="list.id"
                @dragstart="dragstartEvent"
                @dragend="dragendEvent"
                @dragenter="dragenterEvent"
                @dragleave="dragleaveEvent"
                @dragover="dragoverEvent"
            >{{list.title}}</div>
        </div>
    </section>

</template>
<script>
	 export default {
        data() {
            return {
                dragElement: null,
                lock: true,
                data1: [
                    {id: 1, title: this.$t('objFill.v101.liebiaobtis')[0]},
                    {id: 2, title: this.$t('objFill.v101.liebiaobtis')[1]},
                    {id: 3, title: this.$t('objFill.v101.liebiaobtis')[2]},
                    {id: 4, title: this.$t('objFill.v101.liebiaobtis')[3]},
                    {id: 5, title: this.$t('objFill.v101.liebiaobtis')[4]},
                    {id: 6, title: this.$t('objFill.v101.liebiaobtis')[5]},
                    {id: 7, title: this.$t('objFill.v101.liebiaobtis')[6]}
                ],
                data2: [
                    {id: 1, title: this.$t('objFill.v101.liebiaobtiers')[0]},
                    {id: 2, title: this.$t('objFill.v101.liebiaobtiers')[1]},
                    {id: 3, title: this.$t('objFill.v101.liebiaobtiers')[2]},
                    {id: 4, title: this.$t('objFill.v101.liebiaobtiers')[3]}
                ]
            }
        },
        methods: {
            dragstartEvent(ev) {
                const self = this;
                self.dragElement = ev.target;
                ev.target.style.backgroundColor = '#f8f8f8';
            },
            dragendEvent(ev) {
                ev.target.style.backgroundColor = '#fff';
                ev.preventDefault();
            },
            dragenterEvent(ev) {
                const self = this;
                if(self.dragElement != ev.target){
                    ev.target.parentNode.insertBefore(self.dragElement, ev.target);
                }
            },
            dragleaveEvent(ev) {
                const self = this;
                if(self.dragElement != ev.target){
                    if(self.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
                        ev.target.parentNode.appendChild(self.dragElement);
                        self.lock = false;
                    }else{
                        self.lock = true;
                    }
                }
            },
            dragoverEvent(ev) {
                ev.preventDefault();
            }
        }
    }
</script>

<style>
	    .drag-box-left{
        float: left;
        width: 45%;
    }
    .drag-box-right{
        float: right;
        width: 45%;
    }
    .drag-list{
        border: 1px solid #ddd;
        padding:10px;
        margin-bottom: 20px;
        transition: border .3s;
    }
    .drag-list:hover{
        border: 1px solid #20a0ff;
    }
    .drag-title{
        font-weight: 400;
        line-height: 25px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }


</style>