四面八方拖拽

var zIndex = 0;
var flag = 0;

var programNum = 0;

$(document).on('click','.dragBox',function(ev){
    ev.stopPropagation();
    $(".dragBox").removeClass('focusActive');
    $(".textModel").addClass('textBorder');
    $(this).addClass('focusActive');
    if($(this).find('.editText').length==0){
        $('.editText').attr('contenteditable',false);
    }else{
        $('.editText').attr('contenteditable',true);
    }
})

//删除当前拖拽层
function removeDrag() {
    $(".focusActive").remove();
    hideContextMenu();
}

//置于顶层
function moveUpDrag() {
    $(".focusActive").css('z-index',zIndex++);
    hideContextMenu();
}

//置于底层
function moveDownDrag() {
    $(".focusActive").css('z-index',0);
    hideContextMenu();
}

function hideContextMenu() {
    $('.contextMenu').hide();
}

$(document).click(function(){
    $(".dragBox").removeClass('focusActive');
    $(".textModel").addClass('textBorder');
    $('.editText').attr('contenteditable',false);
    hideContextMenu();
})
$(document).on('contextmenu','.imgModel',function (ev) {
    if($(this).hasClass('focusActive')){
        $('#imgContextMenu').show();
        $('#imgContextMenu').css({
            left:ev.clientX + 'px',
            top:ev.clientY+ 'px',
        })
        return false;
    }
})
function createImg(){
    var timeStamp = getFullTime();
    programNum++;
    var imgStr = `<div class="dragBox imgModel" dragType="imgModel" id="program`+programNum+`">
    <span class="r"></span>
    <span class="l"></span>
    <span class="rm"></span>
    <span class="lm"></span>
    <span class="t"></span>
    <span class="b"></span>
    <span class="tm"></span>
    <span class="bm"></span>
    <span class="br"></span>
    <span class="bl"></span>
    <span class="tr"></span>
    <span class="tl"></span>
    <div class="dragImgList"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/iknow/730-350-0.jpg"></div>
</div>`;
    $('#dragWrap').append(imgStr);
    $('.dragBox').removeClass('focusActive');
    $('#program'+programNum).addClass('focusActive');
    dragCanvas('#program'+programNum,'add');
}

function createVideo(){
    var timeStamp = getFullTime();
    programNum++;
    var imgStr = `<div class="dragBox VideoModel" dragType="VideoModel" id="program`+programNum+`">
        <span class="r"></span>
        <span class="l"></span>
        <span class="rm"></span>
        <span class="lm"></span>
        <span class="t"></span>
        <span class="b"></span>
        <span class="tm"></span>
        <span class="bm"></span>
        <span class="br"></span>
        <span class="bl"></span>
        <span class="tr"></span>
        <span class="tl"></span>
        <video preload="auto" style="height: 100%; 100%">
        <source src="http://114.247.181.27:8888/video/resource_1534917786698.mp4" type="video/mp4">
        <source src="http://114.247.181.27:8888/video/resource_1534917786698.mp4" type="video/ogg">
        Your browser does not support the video tag. 
    </video>
</div>`;

    $('#dragWrap').append(imgStr);
    $('.dragBox').removeClass('focusActive');
    $('#program'+programNum).addClass('focusActive');
    dragCanvas('#program'+programNum,'add');
}

function createText(){
    var timeStamp = getFullTime();
    programNum++;
    var imgStr = `<div class="dragBox textModel" dragType="textModel" id="program`+programNum+`">
    <span class="r"></span>
    <span class="l"></span>
    <span class="rm"></span>
    <span class="lm"></span>
    <span class="t"></span>
    <span class="b"></span>
    <span class="tm"></span>
    <span class="bm"></span>
    <span class="br"></span>
    <span class="bl"></span>
    <span class="tr"></span>
    <span class="tl"></span>
    <div class="editText" contenteditable="true"; style="margin: 20px;outline:none;">这是一段可编辑的段落。请试着编辑该文本。</div>
</div>`;
    $('#dragWrap').append(imgStr);
    $('.dragBox').removeClass('focusActive');
    $('#program'+programNum).addClass('focusActive');
    dragCanvas('#program'+programNum,'add');
}

function getFullTime(){
    var oDate  = new Date();
    return ('' + oDate.getFullYear() + bzero(oDate.getMonth()+1) + bzero(oDate.getDate()) + bzero(oDate.getHours())+ bzero(oDate.getMinutes()) + bzero(oDate.getSeconds()));
}
function bzero(num){
    return num > 9 ? num : '0' + num;
}
function dragCanvas(dragParent,type){
    var dragParent = document.querySelector(dragParent);
    if(type=='add'){
        dragParent.style.zIndex = zIndex++;
    }else{
        zIndex = $("#dragWrap .dragBox").last().css('z-index');
        dragParent.style.zIndex = zIndex++;
    }
    var aSpan = dragParent.getElementsByTagName('span');
    for (var i = 0; i < aSpan.length; i++) {
        dragFn(aSpan[i],dragParent);
    }
    new ChildDrag(dragParent);
}

function dragFn(obj,parent) {
    obj.onmousedown = function (ev) {
        var oEv = ev || event;
        oEv.stopPropagation();

        var oldWidth = parent.offsetWidth;
        var oldHeight = parent.offsetHeight;
        var oldX = oEv.clientX;
        var oldY = oEv.clientY;
        var oldLeft = parent.offsetLeft;
        var oldTop = parent.offsetTop;

        var ratio = oldWidth/oldHeight

        console.log(ratio);

        document.onmousemove = function (ev) {
            var oEv = ev || event;
            oEv.stopPropagation()

            var changeX = oEv.clientX - oldX;
            var changeY = oEv.clientY - oldY;

            var L = parent.offsetLeft-1;
            var T = parent.offsetTop-1;

            var canvasSpace = document.getElementById('dragWrap');

            var limit = false;

            var maxTop = canvasSpace.clientHeight - parent.offsetHeight;
            var maxLeft = canvasSpace.clientWidth - parent.offsetWidth;
            var maxHeight = canvasSpace.clientHeight - maxTop;

            if (obj.className == 'tl') {
                if(L>0 && T>0 || L<=0 && changeX>0 || T<=0 && changeY>0){
                    parent.style.left = oldLeft + changeX + 'px';
                    parent.style.top = oldTop + changeX/ratio + 'px';
                    parent.style.width = oldWidth - changeX + 'px';
                    parent.style.height = oldHeight - changeX/ratio+'px';
                }
                limitSpace(parent,'tl');
            }else if (obj.className == 'bl') {
                // if(!limitSpace(parent) || changeX>0 ){
                //     parent.style.width = oldWidth - changeX + 'px';
                //     parent.style.height = oldHeight - changeX/ratio+'px';
                //     parent.style.left = oldLeft + changeX + 'px';
                // }
                
                if(L>0 && T<maxTop || L<=0 && changeX>0 || T<=maxTop && changeY>0 && changeX>0){
                    parent.style.width = oldWidth - changeX + 'px';
                    parent.style.height = oldHeight - changeX/ratio+'px';
                    parent.style.left = oldLeft + changeX + 'px';
                }
                limitSpace(parent,'bl');
            }else if (obj.className == 'tr') {
                if(T<=0 && changeY>0 || T>0 && L<=maxLeft || changeX<0){
                    parent.style.top = oldTop - changeX/ratio + 'px';
                    parent.style.width = oldWidth + changeX + 'px';
                    parent.style.height = oldHeight + changeX/ratio+'px';
                }
                limitSpace(parent,'tr');
            }else if (obj.className == 'br') {
                if(L>=maxLeft && changeX<0 || T<=maxTop && L<=maxLeft || T<=maxTop && changeY<0){
                    parent.style.width = oldWidth + changeX + 'px';
                    parent.style.height = oldHeight + changeX/ratio+'px';
                }
                limitSpace(parent,'br');
            }else if (obj.className == 't' || obj.className == 'tm') {
                if(T>0 || T<=0 && changeY>0){
                    parent.style.top = oldTop + changeY + 'px';
                    parent.style.height=oldHeight - changeY+'px';
                }
                limitSpace(parent,'tm');
            }else if (obj.className == 'b' || obj.className == 'bm') {
                if(T<=maxTop || T>=maxTop && changeY<0){
                    parent.style.height = oldHeight + changeY+'px';
                }
                var str = limitSpace(parent,'bm');
            }
            else if (obj.className == 'l' || obj.className == 'lm') {
                if(L>0 || L<=0 && changeX>0){
                    parent.style.left = oldLeft + changeX + 'px';
                    parent.style.height = oldHeight + 'px';
                    parent.style.width = oldWidth - changeX + 'px';
                }
                limitSpace(parent,'lm');
            }
            else if (obj.className == 'r' || obj.className == 'rm') {
                if(L<maxLeft || L>=maxLeft && changeX<0){
                    parent.style.height = oldHeight + 'px';
                    parent.style.width = oldWidth + changeX + 'px';
                }
                limitSpace(parent,'rm');
            }
        };

        document.onmouseup = function () {
            document.onmousemove = null;
        };
        return false;
    };
}

function limitSpace(parent,type){
    var canvasSpace = document.getElementById('dragWrap');
    var L = parent.offsetLeft;
    var T = parent.offsetTop;
    var limit = false;
    if (L <= 0){
        L = 0;
        limit = true;
    } else if(L >= canvasSpace.offsetWidth - parent.offsetWidth){
        L = canvasSpace.offsetWidth - parent.offsetWidth;
        limit = true;
    }

    if (T <= 0){
        T = 0;
        limit = true;
    } else if(T >= canvasSpace.clientHeight - parent.offsetHeight){
        T = canvasSpace.clientHeight - parent.offsetHeight;
        if(type.indexOf('b')!=-1){
            //return 'blimit'
        }
        limit = true;
    }

    
    parent.style.left = L + 'px';
    parent.style.top = T + 'px';

    //return limit;

}


function extend(obj1,obj2){
    for(attr in obj2){
        if(obj2 && obj2.hasOwnProperty(attr)){
            obj1[attr] = obj2[attr];
        }
    }
}

function Drag(obj){
    this.obj = obj;
    this.disX = 0;
    this.disY = 0;
    this.init();
    this.canvasSpace = document.getElementById('dragWrap');
}

Drag.prototype.init=function(){
    var This = this;
    this.obj.onmousedown = function(ev){
        $(".dragBox").removeClass('focusActive');
        $(this).addClass('focusActive');
        var ev = ev || event;
        This.fnDown(ev);
        document.onmousemove = function(ev){
            var ev = ev || event;
            This.fnMove(ev);
        };
        document.onmouseup = function(){
            This.fnUp();
        };
        console.log(ev.target.className=='editText')
        if(ev.target.className=='editText'){

        }else{
            return false;
        }
        
    };
    return this;
};

Drag.prototype.fnDown=function(ev){
    this.disX = ev.clientX - this.obj.offsetLeft;
    this.disY = ev.clientY - this.obj.offsetTop;
    $(this.obj).removeClass('textBorder');
};

Drag.prototype.fnMove = function(ev){
    this.obj.style.left =ev.clientX-this.disX+'px';
    this.obj.style.top =ev.clientY-this.disY+'px';
};

Drag.prototype.fnUp = function(){
    document.onmousemove = null;
    document.onmouseup = null;
};

function ChildDrag(obj){
    Drag.call(this,obj);
}

extend(ChildDrag.prototype , Drag.prototype);

ChildDrag.prototype.fnMove = function(ev){

    var L = ev.clientX - this.disX;
    var T = ev.clientY - this.disY;
    if (L <= 0){
        L = 0;
    } else if(L>this.canvasSpace.clientWidth-this.obj.offsetWidth){
        L = this.canvasSpace.clientWidth-this.obj.offsetWidth;
        console.log(this.canvasSpace.clientWidth)
    }

    if (T <= 0){
        T = 0;
    } else if(T>this.canvasSpace.clientHeight-this.obj.offsetHeight){
        T = this.canvasSpace.clientHeight-this.obj.offsetHeight;
    }

    this.obj.style.left = L + 'px';
    this.obj.style.top = T + 'px';
}

html结构

<!-- 内容区域 -->
<style>
    html,body{-overflow-y: hidden;}
</style>
<link rel="stylesheet" href="./static/css/common/drag.css">
<script src="./static/js/common/drag.js"></script>
<div class="tpl-content-wrapper active" style="background: #fff;display: flex;position: relative ">
    <div id="programLeft"></div>
    <div id="programMain">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 bgf" id="createType" style="display: flex;">
            <div id="titlebar" class="am-cf" style="padding:0.166rem;margin: auto">
                <div class="am-fl itemBox">
                    <div class="item picture" id="text" type="picture" @click.stop="createText()">
                        <span class="am-icon-text-height am-icon-md" style="color: #707070;"></span>
                        <label style="color: #707070;">文本</label>
                    </div>
                </div>
                <div class="am-fl itemBox" @click.stop="createImg()">
                    <div class="item picture" id="picture" type="picture">
                        <span class="am-icon-image am-icon-md"></span>
                        <label style="color: #707070;">图片</label>
                    </div>
                </div>
                <div class="am-fl itemBox" @click.stop="createVideo()">
                    <div class="item video" id="video" type="video">
                        <span class="am-icon-film am-icon-md"></span>
                        <label style="color: #707070;">视频</label>
                    </div>
                </div>
                <div class="am-fl itemBox" @click.stop="saveHtml()">
                    <div class="item video" type="video">
                        <span class="am-icon-save am-icon-md"></span>
                        <label style="color: #707070;">保存</label>
                    </div>
                </div>
                <div class="am-fl itemBox" @click.stop="preview()">
                    <div class="item video" type="video">
                        <span class="am-icon-eye am-icon-md"></span>
                        <label style="color: #707070;">预览</label>
                    </div>
                </div>
                <div class="am-fl itemBox" @click.stop="publish()">
                    <div class="item video" type="video">
                        <span class="am-icon-cloud-upload am-icon-md"></span>
                        <label style="color: #707070;">发布</label>
                    </div>
                </div>
            </div>
        </div>
        <div id="dragWrap">

        </div>
        <ul id="imgContextMenu" class="contextMenu">
            <li onclick="moveUpDrag()">置于顶层</li>
            <li onclick="moveDownDrag()">置于底层</li>
            <li onclick="removeDrag()">删除</li>
        </ul>
    </div>
    <div id="programRight"></div>
</div>

css样式

.dragBox {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 500px;
    background: #fff;
    cursor: move;
}

/*四边*/
.dragBox .t,
.dragBox .b,
.dragBox .l,
.dragBox .r {
    position: absolute;
    z-index: 1;
    background:#666;
}

.dragBox .l,
.dragBox .r {
    width: 1px;
    background: #08a1ef;
    height: 100%;
    cursor: col-resize;
}

.dragBox .t,
.dragBox .b {
    width: 100%;
    height: 1px;
    background: #08a1ef;
    cursor: row-resize;
}

.textBorder{
    border: 1px solid #08a1ef;
}

.dragBox .t {
    top: 0;
}

.dragBox .b {
    bottom: 0;
}

.dragBox .tm {
    top: -5px;
    left: 50%;
    margin-left: -5px;
}

.dragBox .bm {
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
}

.dragBox .l {
    left: 0;
}

.dragBox .rm {
    right: -5px;
    top: 50%;
    margin-top: -5px;
}

.dragBox .lm {
    left: -5px;
    top: 50%;
    margin-top: -5px;
}

.dragBox .r {
    right: 0;
}

/*四角*/
.dragBox .rm,
.dragBox .lm,
.dragBox .tm,
.dragBox .bm,
.dragBox .tl,
.dragBox .bl,
.dragBox .br,
.dragBox .tr {
    width: 9px;
    height: 9px;
    position: absolute;
    background: #CCC;
    z-index: 2;
    border: 1px solid #08a1ef;
    background-color: #fff;
    /*cursor: nwse-resize*/
}

.dragBox .tl{
    cursor: nw-resize
}
.dragBox .bl{
    cursor: sw-resize
}
.dragBox .br{
    cursor: se-resize
}
.dragBox .tr{
    cursor: ne-resize
}
.dragBox .tm{
    cursor: n-resize
}
.dragBox .bm{
    cursor: s-resize
}
.dragBox .rm{
    cursor: w-resize
}
.dragBox .lm{
    cursor: e-resize
}



.dragBox .tl,
.dragBox .bl {
    left: -5px;
}

.dragBox .tr,
.dragBox .br {
    right: -5px;
}

.dragBox .br,
.dragBox .bl {
    bottom: -5px;
}

.dragBox .tl,
.dragBox .tr {
    top: -5px;
}
.dragBox img{
    width: 100%;
    height: 100%;
    display: block;
}
.dragBox span{
    display: none;
}

.focusActive span{
    display: block;
}