基于vue的可自动以参数的元素拖动效果-html代码-BFW代码库

代码语言：html
代码描述：基于vue的可自动以参数的元素拖动效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
    <style>
       
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header, hgroup,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        /* HTML5 display-role reset for older browsers */
        article, aside, details, figcaption, figure,
        footer, header, hgroup, menu, nav, section {
            display: block;
        }
        body {
            line-height: 1;
        }
        ol, ul {
            list-style: none;
        }
        blockquote, q {
            quotes: none;
        }
        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script>!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueDragResize=e():t.VueDragResize=e()}(window,function(){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=44)}([function(t,e,n){var i=n(16);"string"==typeof i&&(i=[[t.i,i,""]]);var r={};r.transform=void 0;n(5)(i,r);i.locals&&(t.exports=i.locals)},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i={y:{t:"top",m:"marginTop",b:"bottom"},x:{l:"left",m:"marginLeft",r:"right"}};e.default={name:"vue-drag-resize",props:{parentScaleX:{type:Number,default:1},parentScaleY:{type:Number,default:1},isActive:{type:Boolean,default:!1},preventActiveBehavior:{type:Boolean,default:!1},isDraggable:{type:Boolean,default:!0},isResizable:{type:Boolean,default:!0},aspectRatio:{type:Boolean,default:!1},parentLimitation:{type:Boolean,default:!1},parentW:{type:Number,default:0,validator:function(t){return t>=0}},parentH:{type:Number,default:0,validator:function(t){return t>=0}},w:{type:Number,default:100,validator:function(t){return t>0}},h:{type:Number,default:100,validator:function(t){return t>0}},minw:{type:Number,default:50,validator:function(t){return t>0}},minh:{type:Number,default:50,validator:function(t){return t>0}},x:{type:Number,default:0,validator:function(t){return"number"==typeof t}},y:{type:Number,default:0,validator:function(t){return"number"==typeof t}},z:{type:[String,Number],default:"auto",validator:function(t){return"string"==typeof t?"auto"===t:t>=0}},dragHandle:{type:String,default:null},dragCancel:{type:String,default:null},sticks:{type:Array,default:function(){return["tl","tm","tr","mr","br","bm","bl","ml"]}},axis:{type:String,default:"both",validator:function(t){return-1!==["x","y","both","none"].indexOf(t)}}},data:function(){return{active:this.isActive,rawWidth:this.w,rawHeight:this.h,rawLeft:this.x,rawTop:this.y,rawRight:null,rawBottom:null,zIndex:this.z,aspectFactor:this.w/this.h,parentWidth:null,parentHeight:null,left:this.x,top:this.y,right:null,bottom:null,minWidth:this.minw,minHeight:this.minh}},created:function(){this.stickDrag=!1,this.bodyDrag=!1,this.stickAxis=null,this.stickStartPos={mouseX:0,mouseY:0,x:0,y:0,w:0,h:0},this.limits={minLeft:null,maxLeft:null,minRight:null,maxRight:null,minTop:null,maxTop:null,minBottom:null,maxBottom:null},this.currentStick=[]},mounted:function(){if(this.parentElement=this.$el.parentNode,this.parentWidth=this.parentW?this.parentW:this.parentElement.clientWidth,this.parentHeight=this.parentH?this.parentH:this.parentElement.clientHeight,this.rawRight=this.parentWidth-this.rawWidth-this.rawLeft,this.rawBottom=this.parentHeight-this.rawHeight-this.rawTop,document.documentElement.addEventListener("mousemove",this.move),document.documentElement.addEventListener("mouseup",this.up),document.documentElement.addEventListener("mouseleave",this.up),document.documentElement.addEventListener("mousedown",this.deselect),document.documentElement.addEventListener("touchmove",this.move,!0),document.documentElement.addEventListener("touchend touchcancel",this.up,!0),document.documentElement.addEventListener("touchstart",this.up,!0),this.dragHandle){var t=Array.prototype.slice.call(this.$el.querySelectorAll(this.dragHandle));for(var e in t)t[e].setAttribute("data-drag-handle",this._uid)}if(this.dragCancel){var n=Array.prototype.slice.call(this.$el.querySelectorAll(this.dragCancel));for(var i in n)n[i].setAttribute("data-drag-cancel",this._uid)}},beforeDestroy:function(){document.documentElement.removeEventListener("mousemove",this.move),document.documentElement.removeEventListener("mouseup",this.up),document.documentElement.removeEventListener("mouseleave",this.up),document.documentElement.removeEventListener("mousedown",this.deselect),document.documentElement.removeEventListener("touchmove",this.move,!0),document.documentElement.removeEventListener("touchend touchcancel",this.up,!0),document.documentElement.removeEventListener("touchstart",this.up,!0)},methods:{deselect:function(){this.preventActiveBehavior||(this.active=!1)},move:function(t){(this.stickDrag||this.bodyDrag)&&(t.stopPropagation(),this.stickDrag&&this.stickMove(t),this.bodyDrag&&this.bodyMove(t))},up:function(t){this.stickDrag&&this.stickUp(t),this.bodyDrag&&this.bodyUp(t)},bodyDown:function(t){var e=t.target||t.srcElement;this.preventActiveBehavior||(this.active=!0),t.button&&0!==t.button||(this.$emit("clicked",t),this.isDraggable&&this.active&&(this.dragHandle&&e.getAttribute("data-drag-handle")!==this._uid.toString()||this.dragCancel&&e.getAttribute("data-drag-cancel")===this._uid.toString()||(this.bodyDrag=!0,this.stickStartPos.mouseX=t.pageX||t.touches[0].pageX,this.stickStartPos.mouseY=t.pageY||t.touches[0].pageY,this.stickStartPos.left=this.left,this.stickStartPos.right=this.right,this.stickStartPos.top=this.top,this.stickStartPos.bottom=this.bottom,this.parentLimitation&&(this.limits=this.calcDragLimitation()))))},calcDragLimitation:function(){var t=this.parentWidth,e=this.parentHeight;return{minLeft:0,maxLeft:t-this.width,minRight:0,maxRight:t-this.width,minTop:0,maxTop:e-this.height,minBottom:0,maxBottom:e-this.height}},bodyMove:function(t){var e=this.stickStartPos,n={x:("y"!==this.axis&&"none"!==this.axis?e.mouseX-(t.pageX||t.touches[0].pageX):0)/this.parentScaleX,y:("x"!==this.axis&&"none"!==this.axis?e.mouseY-(t.pageY||t.touches[0].pageY):0)/this.parentScaleY};this.rawTop=e.top-n.y,this.rawBottom=e.bottom+n.y,this.rawLeft=e.left-n.x,this.rawRight=e.right+n.x,this.$emit("dragging",this.rect)},bodyUp:function(){this.bodyDrag=!1,this.$emit("dragging",this.rect),this.$emit("dragstop",this.rect),this.stickStartPos={mouseX:0,mouseY:0,x:0,y:0,w:0,h:0},this.limits={minLeft:null,maxLeft:null,minRight:null,maxRight:null,minTop:null,maxTop:null,minBottom:null,maxBottom:null}},stickDown:function(t,e){if(this.isResizable&&this.active){switch(this.stickDrag=!0,this.stickStartPos.mouseX=e.pageX||e.touches[0].pageX,this.stickStartPos.mouseY=e.pageY||e.touches[0].pageY,this.stickStartPos.left=this.left,this.stickStartPos.right=this.right,this.stickStartPos.top=this.top,this.stickStartPos.bottom=this.bottom,this.currentStick=t.split(""),this.stickAxis=null,this.currentStick[0]){case"b":case"t":this.stickAxis="y"}switch(this.currentStick[1]){case"r":case"l":this.stickAxis="y"===this.stickAxis?"xy":"x"}this.limits=this.calcResizeLimitation()}},calcResizeLimitation:function(){var t=this.minWidth,e=this.minHeight,n=this.aspectFactor,i=this.width,r=this.height,o=this.bottom,a=this.top,s=this.left,c=this.right,u=this.stickAxis,l=this.parentLimitation?0:null;this.aspectRatio&&(t/e>n?e=t/n:t=n*e);var f={minLeft:l,maxLeft:s+(i-t),minRight:l,maxRight:c+(i-t),minTop:l,maxTop:a+(r-e),minBottom:l,maxBottom:o+(r-e)};if(this.aspectRatio){var d={minLeft:s-Math.min(a,o)*n*2,maxLeft:s+(r-e)/2*n*2,minRight:c-Math.min(a,o)*n*2,maxRight:c+(r-e)/2*n*2,minTop:a-Math.min(s,c)/n*2,maxTop:a+(i-t)/2/n*2,minBottom:o-Math.min(s,c)/n*2,maxBottom:o+(i-t)/2/n*2};"x"===u?f={minLeft:Math.max(f.minLeft,d.minLeft),maxLeft:Math.min(f.maxLeft,d.maxLeft),minRight:Math.max(f.minRight,d.minRight),maxRight:Math.min(f.maxRight,d.maxRight)}:"y"===u&&(f={minTop:Math.max(f.minTop,d.minTop),maxTop:Math.min(f.maxTop,d.maxTop),minBottom:Math.max(f.minBottom,d.minBottom),maxBottom:Math.min(f.maxBottom,d.maxBottom)})}return f},stickMove:function(t){var e=this.stickStartPos,n={x:(e.mouseX-(t.pageX||t.touches[0].pageX))/this.parentScaleX,y:(e.mouseY-(t.pageY||t.touches[0].pageY))/this.parentScaleY};switch(this.currentStick[0]){case"b":this.rawBottom=e.bottom+n.y;break;case"t":this.rawTop=e.top-n.y}switch(this.currentStick[1]){case"r":this.rawRight=e.right+n.x;break;case"l":this.rawLeft=e.left-n.x}this.$emit("resizing",this.rect)},stickUp:function(){this.stickDrag=!1,this.stickStartPos={mouseX:0,mouseY:0,x:0,y:0,w:0,h:0},this.limits={minLeft:null,maxLeft:null,minRight:null,maxRight:null,minTop:null,maxTop:null,minBottom:null,maxBottom:null},this.rawTop=this.top,this.rawBottom=this.bottom,this.rawLeft=this.left,this.rawRight=this.right,this.stickAxis=null,this.$emit("resizing",this.rect),this.$emit("resizestop",this.rect)},aspectRatioCorrection:function(){if(this.aspectRatio){var t=this.bottom,e=this.top,n=this.left,i=this.right,r=this.width,o=this.height,a=this.aspectFactor,s=this.currentStick;if(r/o>a){var c=a*o;"l"===s[1]?this.left=n+r-c:this.right=i+r-c}else{var u=r/a;"t"===s[0]?this.top=e+o-u:this.bottom=t+o-u}}}},computed:{style:function(){return{top:this.top+"px",left:this.left+"px",width:this.width+"px",height:this.height+"px",zIndex:this.zIndex}},vdrStick:function(){var t=this;return function(e){var n={width:8/t.parentScaleX+"px",height:8/t.parentScaleY+"px"};return n[i.y[e[0]]]=8/t.parentScaleX/-2+"px",n[i.x[e[1]]]=8/t.parentScaleX/-2+"px",n}},width:function(){return this.parentWidth-this.left-this.right},height:function(){return this.parentHeight-this.top-this.bottom},rect:function(){return{left:Math.round(this.left),top:Math.round(this.top),width:Math.round(this.width),height:Math.round(this.height)}}},watch:{rawLeft:function(t){var e=this.limits,n=this.stickAxis,i=this.aspectFactor,r=this.aspectRatio,o=this.left,a=this.bottom,s=this.top;if(null!==e.minLeft&&t<e.minLeft?t=e.minLeft:null!==e.maxLeft&&e.maxLeft<t&&(t=e.maxLeft),r&&"x"===n){var c=o-t;this.rawTop=s-c/i/2,this.rawBottom=a-c/i/2}this.left=t},rawRight:function(t){var e=this.limits,n=this.stickAxis,i=this.aspectFactor,r=this.aspectRatio,o=this.right,a=this.bottom,s=this.top;if(null!==e.minRight&&t<e.minRight?t=e.minRight:null!==e.maxRight&&e.maxRight<t&&(t=e.maxRight),r&&"x"===n){var c=o-t;this.rawTop=s-c/i/2,this.rawBottom=a-c/i/2}this.right=t},rawTop:function(t){var e=this.limits,n=this.stickAxis,i=this.aspectFactor,r=this.aspectRatio,o=this.right,a=this.left,s=this.top;if(null!==e.minTop&&t<e.minTop?t=e.minTop:null!==e.maxTop&&e.maxTop<t&&(t=e.maxTop),r&&"y"===n){var c=s-t;this.rawLeft=a-c*i/2,this.rawRight=o-c*i/2}this.top=t},rawBottom:function(t){var e=this.limits,n=this.stickAxis,i=this.aspectFactor,r=this.aspectRatio,o=this.right,a=this.left,s=this.bottom;if(null!==e.minBottom&&t<e.minBottom?t=e.minBottom:null!==e.maxBottom&&e.maxBottom<t&&(t=e.maxBottom),r&&"y"===n){var c=s-t;this.rawLeft=a-c*i/2,this.rawRight=o-c*i/2}this.bottom=t},width:function(){this.aspectRatioCorrection()},height:function(){this.aspectRatioCorrection()},active:function(t){t?this.$emit("activated"):this.$emit("deactivated")},isActive:function(t){this.active=t},z:function(t){(t>=0||"auto"===t)&&(this.zIndex=t)},aspectRatio:function(t){t&&(this.aspectFactor=this.width/this.height)},minw:function(t){t>0&&t<=this.width&&(this.minWidth=t)},minh:function(t){t>0&&t<=this.height&&(this.minHeight=t)},x:function(){if(!this.stickDrag&&!this.bodyDrag){this.parentLimitation&&(this.limits=this.calcDragLimitation());var t=this.x-this.left;this.rawLeft=this.x,this.rawRight=this.right-t}},y:function(){if(!this.stickDrag&&!this.bodyDrag){this.parentLimitation&&(this.limits=this.calcDragLimitation());var t=this.y-this.top;this.rawTop=this.y,this.rawBottom=this.bottom-t}},w:function(){if(!this.stickDrag&&!this.bodyDrag){this.currentStick=["m","r"],this.stickAxis="x",this.parentLimitation&&(this.limits=this.calcResizeLimitation());var t=this.width-this.w;this.rawRight=this.right+t}},h:function(){if(!this.stickDrag&&!this.bodyDrag){this.currentStick=["b","m"],this.stickAxis="y",this.parentLimitation&&(this.limits=this.calcResizeLimitation());var t=this.height-this.h;this.rawBottom=this.bottom+t}},parentW:function(t){this.right=t-this.width-this.left,this.parentWidth=t},parentH:function(t){this.bottom=t-this.height-this.top,this.parentHeight=t}}}},function(t,e,n){"use strict";n.r(e);var i=n(1),r=n.n(i);for(var o in i)"default"!==o&&function(t){n.d(e,t,function(){return i[t]})}(o);e.default=r.a},function(t,e,n){"use strict";function i(t,e,n,i,r,o,a,s){var c="function"==typeof t?t.options:t;e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),i&&(c.functional=!0),o&&(c._scopeId="data-v-"+o);var u;if(a?(u=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},c._ssrRegister=u):r&&(u=s?function(){r.call(this,this.$root.$options.shadowRoot)}:r),u)if(c.functional){c._injectStyles=u;var l=c.render;c.render=function(t,e){return u.call(e),l(t,e)}}else{var f=c.beforeCreate;c.beforeCreate=f?[].concat(f,u):[u]}return{exports:t,options:c}}n.d(e,"a",function(){return i})},function(t,e,n){"use strict";var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vdr",class:t.active||t.isActive?"active":"inactive",style:t.style,on:{mousedown:function(e){e.stopPropagation(),e.preventDefault(),t.bodyDown(e)},touchstart:function(e){e.stopPropagation(),e.preventDefault(),t.bodyDown(e)}}},[t._t("default"),t._v(" "),t._l(t.sticks,function(e){return n("div",{staticClass:"vdr-stick",class:["vdr-stick-"+e,t.isResizable?"":"not-resizable"],style:t.vdrStick(e),on:{mousedown:function(n){n.stopPropagation(),n.preventDefault(),t.stickDown(e,n)},touchstart:function(n){n.stopPropagation(),n.preventDefault(),t.stickDown(e,n)}}})})],2)},r=[];i._withStripped=!0;n.d(e,"a",function(){return i}),n.d(e,"b",function(){return r})},function(t,e,n){function i(t,e){for(var n=0;n<t.length;n++){var i=t[n],r=h[i.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](i.parts[o]);for(;o<i.parts.length;o++)r.parts.push(l(i.parts[o],e))}else{for(var a=[],o=0;o<i.parts.length;o++)a.push(l(i.parts[o],e));h[i.id]={id:i.id,refs:1,parts:a}}}}function r(t,e){for(var n=[],i={},r=0;r<t.length;r++){var o=t[r],a=e.base?o[0]+e.base:o[0],s=o[1],c=o[2],u=o[3],l={css:s,media:c,sourceMap:u};i[a]?i[a].parts.push(l):n.push(i[a]={id:a,parts:[l]})}return n}function o(t,e){var n=m(t.insertInto);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var i=b[b.length-1];if("top"===t.insertAt)i?i.nextSibling?n.insertBefore(e,i.nextSibling):n.appendChild(e):n.insertBefore(e,n.firstChild),b.push(e);else{if("bottom"!==t.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(e)}}function a(t){if(null===t.parentNode)return!1;t.parentNode.........完整代码请登录后点击上方下载按钮下载查看