// vue 利用指令 实现 拖拽元素
<template>
    <div   draggable  v-drag   :style="setStyle()" class="el">

        <!--    缩放  -->
        <span class="scale"  v-dragscale draggable="true"></span>

        <slot></slot>
    </div>
</template>

<script>
export default {
    data () {
        return {
            dragEl: {
                 left: 0, top: 0, width: 30, height: 30
            }
        }
    },
    directives: {
        /** 拖拽 */
        drag: {
            inserted: (el, binding, vnode) => {
                let divx = 0, divy = 0, parent = el.parentNode
                let maxLeft = 0, maxTop = 0, l = 0, t = 0

                let setpos = (e) => {
                    e.stopPropagation()
                    if(e.clientX > 0) {
                        l = e.clientX - divx
                        t = e.clientY - divy

                        maxLeft = parent.clientWidth
                        maxTop = parent.clientHeight

                        // 最大移动范围
                        let lleft = el.clientWidth
                        let ttop = el.clientHeight

                        l = Math.max(0, Math.min(l, maxLeft - lleft))
                        t = Math.max(0, Math.min(t, maxTop - ttop))
                    }
                }
                el.ondragstart = function(e) {
                    e.stopPropagation()
                    if(vnode.context.dragEl.drag) {
                        divx = e.clientX - el.offsetLeft;
                        divy = e.clientY - el.offsetTop;
                    }
                }
                el.ondrag = setpos
                el.ondragend = function (e) {
                    e.stopPropagation()
                    vnode.context.dragEl.left = l
                    vnode.context.dragEl.top = t
                }
            }
        },
        /** 缩放 */
        dragscale: {
            inserted: (el, binding, vnode) => {
                let divx = 0, divy = 0
                let w = 0, h = 0

                let setpos = (e) => {
                    e.stopPropagation()
                    if(e.clientX > 0) {
                        w = e.clientX - divx;
                        h = e.clientY - divy;

                        divx = e.clientX
                        divy = e.clientY

                        let wid = vnode.context.dragEl.width + w
                        let hei = vnode.context.dragEl.height + h
                        if(vnode.context.dragEl.minWidth) {
                            wid = Math.max(wid, vnode.context.dragEl.minWidth)
                        }
                        if(vnode.context.dragEl.minHeight) {
                            hei = Math.max(hei, vnode.context.dragEl.minHeight)
                        }
                        vnode.context.dragEl.width = wid
                        vnode.context.dragEl.height = hei

                    }
                }
                el.ondragstart = function(e) {
                    e.stopPropagation()

                    divx = e.clientX
                    divy = e.clientY

                }
                el.ondrag = setpos
                el.ondragend = function (e) {
                    e.stopPropagation()

                    let wid = vnode.context.dragEl.width + w
                    let hei = vnode.context.dragEl.height + h
                    if(vnode.context.dragEl.minWidth) {
                        wid = Math.max(wid, vnode.context.dragEl.minWidth)
                    }
                    if(vnode.context.dragEl.minHeight) {
                        hei = Math.max(hei, vnode.context.dragEl.minHeight)
                    }
                    vnode.context.dragEl.width = wid
                    vnode.context.dragEl.height = hei

                }

            }
        }
    },
    methods: {
        setStyle() {
            return Object.assign({}, {
                left: this.dragEl.left+'px',
                top: this.dragEl.top + 'px',
                width: this.dragEl.width + 'px' ,
                height: this.dragEl.height + 'px'
            })
        }
    }
}
</script>

<style lang="less" scoped>
.el {
    position: absolute;
    img {display: block;max-width: none;}
    &, * {
        -moz-user-select: none;           /*火狐*/
        -webkit-user-select: none;        /*webkit浏览器*/
        -ms-user-select: none;            /*IE10*/
        -khtml-user-select: none;         /*早期浏览器*/
        user-select: none;                /** 去掉蓝色选中底*/
    }
}
.scale {position: absolute;cursor: pointer;display: none;}
.scale {width: 15px;height: 15px;overflow: hidden;cursor: se-resize;position: absolute;right: 0;bottom: 0;background-color: rgb(122, 191, 238);}
</style>