npm i yjr-drag
pnpm i yjr-drag
yarn add yjr-drag
main.js
import drag from "yjr-drag";
Vue.directive("drag", drag);
Be careful to position the element so that it is not static before use
Just move the elements around according to the mouse. The initial requirement is to bind V-Drag
demo.style.position='fixed'
<div id="demo" v-drag />
Adjust the relative positioning of parent and child elements by passing limit:true
dad.parent.style.position='relative' son.style.position='absolute'
<div id="dad">
<div id="son" v-drag="{limit:true}" />
</div>
Since dragging elements is not static positioning, sometimes when the page data changes or the size of the page element changes or even the browser size is scaled or stretched, your element may not be visible, then pass Origin :[left value, right value], and V-Drag will reset the element for you
<div v-drag="{origin:['calc(50% - 50px)','calc(50% - 50px)']}" />
For a simple example, if you want to make the popover move but you can't make the whole popover move with the mouse, you just move the mouse over the title of the popover and drag the title to make the popover move. Pass effectAreaId:' The ID of the popover title 'to make the popover move as well
box.style.position='fixed'
<div id="box">effectArea</div>
<div id="demo" v-drag="{effectAreaId:'box'}" />