Shulou(Shulou.com)06/02 Report--

Today, the editor will share with you the relevant knowledge points about how to achieve the draggable effect of el-dialog components in the vue project. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

0. First of all, let's see the effect of the above picture.

1. Realization method

Step 1: create a drag.js file to implement the drag source code

/ * drag move * @ param {elementObjct} bar Mouse Click controls dragged element * @ param {elementObjct} target moving element * @ param {function} callback callback * / export function startDrag (bar, target, callback) {var params = {top: 0, left: 0, currentX: 0, currentY: 0, flag: false, cWidth: 0, cHeight: 0 TWidth: 0, tHeight: 0} / / add a style to the drag block bar.style.cursor = 'move'; / / get the relevant CSS attributes / / o is a moving object / / var getCss = function (o, key) {/ / return o.currentStyle? O.currentStyle [key]: document.defaultView.getComputedStyle (o, false) [key]; / /}; bar.onmousedown = function (event) {/ / initialize params var e = event? Event: window.event; params = {top: target.offsetTop, left: target.offsetLeft, currentX: e.clientX, currentY: e.clientY, flag: true, cWidth: document.body.clientWidth, cHeight: document.body.clientHeight, tWidth: target.offsetWidth, tHeight: target.offsetHeight} / / initialize the style for the dragged block target.style.margin = 0; target.style.top = params.top + 'px'; target.style.left = params.left +' px'; if (! event) {/ / prevent IE text from selecting bar.onselectstart = function () {return false }} _ document.onmousemove = function (event) {/ / prevent text from selecting window.getSelection? Window.getSelection () .removeAllRanges (): document.selection.empty (); var e = event? Event: window.event; if (params.flag) {var nowX = e.clientX; var nowY = e.clientY; / / differential distance var disX = nowX-params.currentX; var disY = nowY-params.currentY; / / final moving position var zLeft = 0; var zTop = 0 ZLeft = parseInt (params.left) + disX; / / limit the X-axis range if (zLeft = params.cWidth-parseInt (params.tWidth * 0.5)) {zLeft = params.cWidth-parseInt (params.tWidth * 0.5);} zTop = parseInt (params.top) + disY / / limit the Y-axis range if (zTop = params.cHeight-parseInt (params.tHeight * 0.5)) {zTop = params.cHeight-parseInt (params.tHeight * 0.5);} / / execute mobile target.style.left = zLeft + 'px'; target.style.top = zTop +' px' } if (typeof callback = = "function") {callback (zLeft, zTop);} _ document.onmouseup = function () {params.flag = false; _ document.onmousemove = null; _ document.onmouseup = null;};};}

Step 2: create a new directive.js file and create a vue directive configuration file

/ / introduce drag and drop jsimport {startDrag} from'. / drag.js'/** * add drag and drop function to el-dialog pop-up box * @ param {*} el specify dom * @ param {*} binding binding object * desc as long as the components of el-dialog are used You can increase the v-draggable attribute to become a draggable pop-up box * / const draggable = (el, binding) = > {/ / bind the drag event [the binding drag trigger element is the bullet frame header, and the drag movement element is the entire bullet box] startDrag (el.querySelector ('. El-dialog__header'), el.querySelector ('. El-dialog'), binding.value) }; const directives = {draggable,}; / / this way of writing can register instructions export default {install (Vue) {Object.keys (directives). ForEach ((key) = > {Vue.directive (key, directives [key]);});},}

Step 3: globally introduce the vue directive into the main.js file

/ * Register the global directive * / import directive from'. / utils/directive';Vue.use (directive) step 4: cancel saving using v-draagble

Matters needing attention

The file introduction path needs to be consistent.

These are all the contents of the article "how to achieve the draggable effect of el-dialog components in the vue project". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.