yjr-drag v1.2.5

点我查看中文文档

Download and install

npm i yjr-drag

pnpm i yjr-drag

yarn add yjr-drag

Import

main.js

import drag from "yjr-drag";

Vue.directive("drag", drag);

Usage

Be careful to position the element so that it is not static before use

1.Simple drag

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 />

2.Restrict it to move only within the parent container

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>

3.Let's go back to where we were

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)']}" />

4.Let another element replace the move

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'}" />