search

marcospont / agnostic-draggable

An agnostic set of libraries implementing draggable, droppable, sortable and resizable behaviors inspired by the jQuery UI implementation
MIT License
39 stars 7 forks source link

Vue3 #6

Closed rzn1 closed 1 year ago

rzn1 commented 3 years ago

Hey, how do i properly listen to events?

  new Draggable(document.querySelector(`#Item${index}`),null, {
    revert: "invalid",
    helper: "clone",
    zIndex: 1000,

    "drag:start": function (event) {
      event.cancel();
    },
  });

gives me an error if i dont delete revert, helper and zIndex

Also what does that null mean?

achwilko commented 3 years ago

Hi @rzn1 I've tried with Vue 3 and it's working good. Find example below:

  const sortable = new Sortable(sortableRef.value, {
    handle: '.my-handle,
    axis: 'y',
  });

  sortable.on('sortable:update', (ev) => {
    // Do the magic... 
  });

Also, try to use template refs (https://v3.vuejs.org/guide/composition-api-template-refs.html) to avoid document.querySelector regarding element reference.

rzn1 commented 3 years ago

Hmm, i kinda resolved that issue. Anyways i have another question. Why i can't access any data or methods from inside of droppable event ?

Examples: Trying to access a method : https://gyazo.com/b63f6c44f42bc76c4b38d497a84ee7ad Method: https://gyazo.com/758b4bb95b1db43b600083fcfdc60485 Error: https://gyazo.com/fd1752e7e505b561d3f49acb2933fbf3

Same thing happens if i try to access data also.

rzn1 commented 3 years ago

Forget it, weird but when I used your example I got access to all of that stuff.

marcospont commented 3 years ago

@rzn1 were you able to make it work? In your code, it seems you were referencing 'this' from inside a scope that does not have access to it.