fj-dc-ui/.svn/pristine/13/13cc3f0093ca1b7d0c6bcd58e14d5b43afb7637b.svn-base

<template>
<!-- <transition name="el-fade-in-linear"> -->
    <div id="draggableContainer" ref="draggableRef"
        :style="{
            top:initPosition.top + 'px',
            left:initPosition.left + 'px',
            width:initPosition.width + 'px',
            height:initPosition.height + 'px'
        }"
        >
        <div  class="draggableTitleClass">
            <p style="width:100%;margin: 0px;font-size: 16px;" @mousedown="mousedownfun">{{title}}</p>
            <i @click="closeResult" class="draggableClose el-icon-close"></i>
        </div>
        <div  style="display:flex;flex-direction;column;width:100%;background-color:rgba(255, 255, 255, 0.3);"
            :style="{'height':initPosition.height-31 + 'px'}">
            <div @mousedown="mousedown_left" class="leftClass"></div>
            <div class="slotClass">
                <slot></slot>
            </div>
            <div @mousedown="mousedown_right" class="rightClass"></div>
        </div>
        <div @mousedown="mousedown_bottom" class="bottomClass"></div>
        <img style="cursor:se-resize;position: inherit;width: 10px;height: 10px;bottom: 0px;right: 0px;" 
            src="/src/assets/img/rightCorner.png" @mousedown="rightCornerFun" alt="">
    </div>
    <!-- </transition> -->
</template>
<script>
export default {
    components:{},
    props:['title','initTop','initLeft','initWidth','initHeight'],
    data(){
        return{
            testHeight:'',
            titleName:null,
            initPosition:{
                top:100,
                left:100,
                width:100,
                height:100,
            }
        }
    },
    created :function() {
        if(this.initTop||this.initTop!=null){
            this.initPosition.top = this.initTop;
        }
        if(this.initLeft||this.initLeft!=null){
            this.initPosition.left = this.initLeft;
        }
         if(this.initWidth||this.initWidth!=null){
             this.initPosition.width = this.initWidth;
        }
        if(this.initHeight||this.initHeight!=null){
            this.initPosition.height = this.initHeight;
        }
        console.log(this.initPosition);
    },
    mounted:function(){
        this.titleName = this.title;
        this.init();
    },
    computed: {
        // initPosition:function(){
        //     console.log('ccc');
        //      this.$emit("positionChanged",{
        //          'position':this.initPosition
        //      });
        // }
    },
    methods:{
        closeResult:function(){
            this.$emit("closeDraggable");
        },
        init:function(){
            this.testHeight = this.$refs['draggableRef'].offsetHeight;
        },
        mousedownfun:function(e){
            // var el = this.$refs['draggableRef'];
            var el = this.$refs['draggableRef'];
            var disx = e.pageX - el.offsetLeft;
            var disy = e.pageY - el.offsetTop;
            document.onmousemove = function (e){
                el.style.left = e.pageX - disx+'px';
                el.style.top = e.pageY - disy+'px';
            }
            document.onmouseup = function(){
                document.onmousemove = document.onmouseup = null;
            }
        },
        mousedown_bottom:function(e){
            var _self = this;
            // var el = this.$refs['draggableRef'];
            var el = _self.$refs['draggableRef'];
            var disy = e.pageY - el.offsetTop;
            document.onmousemove = function (e){
                var num = e.pageY - el.offsetTop - 100;
                // el.style.height = num +'px';
                _self.initPosition.height = num;
                console.log('initHeight'+ _self.initPosition.height);
                _self.$emit("positionChanged",{
                 'position':_self.initPosition
             });
            }
            document.onmouseup = function(){
                document.onmousemove = document.onmouseup = null;
            }
        },
        mousedown_left:function(e){
            var el = this.$refs['draggableRef'];
            var el = this.$refs['draggableRef'];
            var disx = e.pageX;
            var temp = el.offsetWidth;
            document.onmousemove = function (e){
                var num = disx - e.pageX + temp;
                el.style.left = e.pageX +'px';
                el.style.width = num +'px';
            }
            document.onmouseup = function(){
                document.onmousemove = document.onmouseup = null;
            }
        },
        mousedown_right:function(e){
            var el = this.$refs['draggableRef'];
            var el = this.$refs['draggableRef'];
            var disx = e.pageX;
            var temp = el.offsetWidth;
            document.onmousemove = function (e){
                var num = e.pageX - disx + temp;
                el.style.width = num +'px';
            }
            document.onmouseup = function(){
                document.onmousemove = document.onmouseup = null;
            }
        },
        rightCornerFun:function(e){
            var _self = this;
            var el = this.$refs['draggableRef'];
            var disx = e.pageX;
            var temp = el.offsetWidth;
            var disy = e.pageY - el.offsetTop;
            document.onmousemove = function (e){
                var num1 = e.pageX - disx + temp;
                el.style.width = num1 +'px';

                var num = e.pageY - el.offsetTop - 100;
                // el.style.height = num +'px';
                _self.initPosition.height = num;
                console.log('initHeight'+ _self.initPosition.height);
                _self.$emit("positionChanged",{
                 'position':_self.initPosition
             });
            }
            document.onmouseup = function(){
                document.onmousemove = document.onmouseup = null;
            }
        }
    }
}
</script>
<style>
#draggableContainer{
    position: absolute;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,.3);
    border-radius: 7px 7px 0px 0px;
    z-index: 5;
    background-color: white;
    /* overflow-y: auto; */
}
.draggableTitleClass{
    display: flex;
    text-align: center;
    height: 31px;
    box-sizing: border-box;
    width: 100%;
    font-size: 13px;
    padding: 5px;
    /* border-bottom: 1px solid #ccc; */
    color: white;
    /* background-color: #0000ffb8; */
    background-color: #1862f7;
background-image: url("../assets/img/rough-cloth-light.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
    cursor: move;
    border-radius: 7px 7px 0px 0px;
}
.bottomClass{
    border-bottom: 2px solid rgb(78, 137, 243);
    cursor: n-resize;
    position: relative;
}
.leftClass{
    border-left: 2px solid rgb(78, 137, 243);
    cursor: w-resize;
}
.rightClass{
    border-right: 2px solid rgb(78, 137, 243);
    cursor: e-resize;
}
.slotClass{
    height: 100%;
    width:100%;
    overflow-y: auto;
    padding-bottom:2px;
    background-color: white;
}
.draggableClose{
    /* padding-top: 2px; */ 
    color: white;
    cursor: pointer;
    font-size: large;
    margin-right: 5px;
}
.draggableClose:hover{
    color:blue;
}
</style>