Git Product home page Git Product logo

v-drag's People

Contributors

dependabot-preview[bot] avatar dependabot[bot] avatar dougblackjr avatar nil avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

v-drag's Issues

Dynamic disabling

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!

@v-drag-start doesn't work.

@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');

Limit drag range

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.

Uncaught TypeError: window.data.move is undefined (NUXT JS)

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

Browser compatibility issue - Internet Explorer

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!

@vue/test-utils with jest complains about unexpected token export

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>

better support for dragging svg elements

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?

Exception when cursor goes beyond top or left of document while dragging

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:

image

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:

// Update value of the mouse position
window.data.mouseX = (e.pageX || e.touches[0].pageX) - window.data.initialX;
window.data.mouseY = (e.pageY || e.touches[0].pageY) - window.data.initialY;

Where e.touches is undefined.

Snap on screen end

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.

Package.json points to non-existing files. Dependency not found

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.

TypeError before using v-drag

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>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.