nil / v-drag Goto Github PK

After adding v-drag to an element we seem to be getting the following error before clicking the element. After clicking the error disappears.

Uncaught TypeError: Cannot read property 'style' of undefined
    at moveElementTransform.js:2
    at HTMLDocument.<anonymous> (dragEnd.js:16)

Out setup is fairly simple:

// app.js
import drag from 'v-drag/src/index';

[...]

Vue.use(drag);

// in a component

<div v-drag>Drag me!</div>

Suggest replacing the following code

into

const valueElement = el.querySelector(handle);

Hi, this certainly is the simplest way to integrate dragging with VueJS :-) except I can't get it to work in IE :-( I am using Vue CLI 3 with Babel and Webpack.

Without making any changes, IE throws an error SCRIPT1006: Expected ')'

If I add v-drag to the transpileDependecies list, then it loads the app but when I try to access a component that has v-drag enabled, both Chrome and IE throw a [Vue warn]: Failed to resolve directive: drag

I tried forking the repository and fixing the default parameters in /src/utils/eventListener.js as I think that may be the problem, but that didn't fix things either.

Any help appreciated!

Hi @nil , thanks for making v-drag, and for sharing it on github! :)

I'm using it to drag some SVG rectangles around. This was my first attempt:

<svg width="640" height="480" style="background:#eee;">
  <rect v-drag="{axis:'all'}" x="10" y="20" width="50" height="30" style="display:block"/>
</svg>

Immediately out of the box, I'm able to drag the rectangle Awesome!

Unfortunately, once I release the mouse, it snaps back to its original position, presumably because the x and y attributes on the element itself supersede the CSS positioning.

So far, I've managed to work around this with the following:

<script setup lang="ts">
import { ref } from 'vue'
const rects = ref([
    {x:10, y:20, w:50, h:30, bg:'tomato'},
    {x:10, y:80, w:50, h:30, bg:'gold'},
    {x:10, y:140, w:50, h:30, bg:'dodgerblue'} ]);

function onDragRectEnd(r) {
   let d = window.data, s = d.move.style
   r.x += d.relativeX; r.y += d.relativeY
   s.left = s.top = 0; s.transform = 'none'
   d.move = null // otherwise dragging anywhere will cause last rectangle to move
}
</script>
<template>
  <svg width="640" height="480" style="background:#eee;">
    <!-- without the `style` below, the rect doesn't move until the end of the first drag -->
    <rect v-for="r in rects" v-drag="{axis:'all'}" @v-drag-end="onDragRectEnd(r)"
          style="left:0; top:0; transform:none"
          :x="r.x" :y="r.y" :width="r.w" :height="r.h" :fill="r.bg" />
  </svg>
</template>

This works, but is basically undoing the initial work that v-drag did, which seems a little wrong:

• This doesn't really generalize to other SVG elements (<circle/> and <ellipse/> both use cx and cy attributes, for example, and others rely on the general transform attribute).

• Also, I haven't yet accounted for what might happen when dragging something inside a transformed container.

I'm somewhat tempted to make this a feature request for finer control over how the "drop" coordinates get baked into the element, but maybe just adding some documentation with advice for SVG would work just as well.

What do you think?

I would like to have a prop to snap the v-drag element on the screen border, so people can't move the element out of the screen.

拖拽到页面顶部之后报错

It seems like this repo is dead. Ive forked this repo and merged the changes #45 into it yo yall can use them.

Repo link: https://github.com/oakyydev/v-drag

Hey, I followed exactly the guidelines on how to use drag-handle and it works but it fires off this console error on page load.

@v-drag-start event doesn't work. @v-drag-down works instead.
Probably a bug in documentation or in file dragStart.js
vueDragEvent(moveElement, 'down');

Clicking anywhere outside the dragable element before dragging causes:

On Firefox: TypeError: window.data.move is undefined

On Chrome: TypeError: Cannot read property 'style' of undefined

See: https://jsfiddle.net/wkv7rc6p/

Might be the same as issue #17.

We're using "@vue/cli-service": "^3.5.1", and we ran this command
npm run test:unit
And got this:

FAIL  src/components/public/SubTierHeaders/DragSubTierHeader.spec.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /app/node_modules/v-drag/dist/main.js:5
    function eventListener(a,t,e="add"){a.forEach(a=>{document[`${e}EventListener`](a,t)})}function returnPositionString(a,t,e){return`matrix(${a||"1, 0, 0, 1,"} ${t}, ${e})`}function updatePosition(a,t){window.data.relativeX=window.data.mouseX*a,window.data.relativeY=window.data.mouseY*t,window.data.move.style.transform=returnPositionString(window.data.matrix,window.data.matrixX+window.data.relativeX,window.data.matrixY+window.data.relativeY)}const callPositionUpdate={x(){updatePosition(!0,!1)},y(){updatePosition(!1,!0)},all(){updatePosition(!0,!0)}};function repeatRaf(){callPositionUpdate[window.data.axis](window.data),window.data.posAnimation=requestAnimationFrame(repeatRaf)}function setUpMovement(){window.data.move.classList.add(window.data.class.move),window.data.posAnimation=requestAnimationFrame(repeatRaf),eventListener(["mousemove","touchmove"],setUpMovement,"remove")}function getTransformValue(a,t){let e=Number(window.getComputedStyle(window.data.move)[t].replace

    SyntaxError: Unexpected token export

      2 | import Vuex from 'vuex'
      3 | import BootstrapVue from 'bootstrap-vue'
    > 4 | import vDrag from 'v-drag'
        | ^
      5 | import DragSubTierHeader from '@/components/public/SubTierHeaders/DragSubTierHeader.vue'
      6 |
      7 | const localVue = createLocalVue()

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (src/components/public/SubTierHeaders/DragSubTierHeader.spec.js:4:1)

Our codes:

<template>
  <b-button
    v-drag
    :style="style"
    @mouseup="updatePositions($event)"
  >
    {{ details.name }}
  </b-button>
</template>

<script>

import SubTierHeader from './SubTierHeader'
import Vue from 'vue'
import vDrag from 'v-drag'
Vue.use(vDrag)

export default {
  name: 'SubTierHeader',
  extends: SubTierHeader,
  computed: {...},
  },
  methods: {...},
}

</style>

Is there a way to restrict the draggable area, to a specific div?

Hi,

Just wondering if it's possible to dynamically disable v-drag?

The use-case is a component, which has a draggable prop which either enables or disables v-drag on the component.

I looked setting the attribute dynamically, but couldn't make it to work properly.

Cheers!

I have been using v-drag with nuxt js SPA.

plugins/drag.js

import Vue from "vue";
import drag from "v-drag";
Vue.use(drag);

But it says

Uncaught TypeError: window.data.move is undefined
    default moveElementTransform.js:2
    default dragEnd.js:16
    default eventListener.js:4
    default eventListener.js:3
    default dragSetup.js:46
    inserted index.js:36
    VueJS 20

I have tried so many ways but still no help. At this point I'm just thinking to change the library itself but I find it so easy and lightweight. So here I am taking my chances to see if anyone can come up with a solution. Cheers !!

Is it possible to import directive to individual component in the way shown below?

import ??? from "v-drag";

export default defineComponent({
directives:{???},
})

The use case are nested components distributes as Custom Elements (Web Components), where app.use() is not working. All imports must be done in the component itself.

https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue

Thanks!

When you drag an element with the v-drag attribute everything works fine until the cursor (not the element) touches the left side or top side of the document. When that happens, the following exception is raised:

When the cursor is touching the top (or beyond it), dragging does continue to work, but when the cursor is touching the left side, the position of the element stops updating until the cursor moves back into the document.

I would guess that the fault lies within these lines:

Where e.touches is undefined.

Is it possible to limit the height of the drag area? I want to have a drawer that is 500px at bottom of screen. I want people to only drag within this parent container. Now it allows users to drag anywhere on the screen.

The recent update, where the dist-directories were removed from version control, broke usage of v-drag, because package.json is still pointing to the dist-directories.

This leads to a hard to debug error message, such as:

ERROR  Failed to compile with 1 errors1:18:18 PM

This dependency was not found:

* v-drag in ./src/app.js

To install it, you can run: npm install --save v-drag

I would suggest that you either run the build steps and add the dist-directory back to git.

binding.oldValue may be undefined