Draggable object animation in VueJS allows for smooth movement of

Question

Draggable object animation in VueJS allows for smooth movement of

I'm currently working on developing draggable objects in Vue.js from scratch, but I've encountered two issues.

After dragging, the object quickly snaps to the target coordinates without any transition effect.
I attempted to eliminate the 'Ghosting image' by changing the opacity to 0% while dragging, but it doesn't seem to be effective.

Below is the code snippet I am currently implementing: https://jsfiddle.net/wmsk1npb/

<div id="app">
  {{x}}/{{y}} ....... {{coordinates}}
        <div class="bubbleMenuContainer" :style="coordinates" draggable="true" @drag="move" @dragend="set">
            Test
        </div>
</div>
new Vue({
  el: '#app',
  data: {
    x:0,
    y:0,
    coordinates:{
         top: "100px",
         left: "100px",
         opacity: "100%",
     }
    },
   methods:{
        move(event){
            this.x =  event.clientX;
            this.y =  event.clientY;
            this.coordinates.left = event.clientX + "px";
            this.coordinates.top = event.clientY + "px";
            this.coordinates.opacity = "0%;"
        },
        set(event){
            this.coordinates.left = event.clientX + "px";
            this.coordinates.top = event.clientY + "px";
            this.coordinates.opacity = "100%;"
        }
    }
})
.bubbleMenuContainer{
    position: absolute;
    border-radius: 100px;
    background-color: lightcoral;
    width: 30px;
    height: 30px;
    padding: 10px;
}

javascript vue.js draggable drag

Answer 1

Answer №1

My approach to achieving draggable functionality differs from using draggable="true". Instead, I prefer utilizing mouse events such as up, down, and move (along with touch equivalents for touch-enabled devices).

This method provides greater control and eliminates the issue of overlapping items being displayed.

The concept behind this technique involves:

Tracking data like position, start drag position (x,y), and whether the item is currently being dragged
Setting isDragging to true and storing the initial drag position coordinates on mouse down event
Updating the position based on the difference between start drag and current clientXY if isDragging === true on mouse move
Resetting isDragging to false on mouse up event

For enhanced functionality, you can dynamically add and remove mousemove and mouseup listeners. Placing the mouse move listener on the document rather than the element itself is a more effective approach.

I recently wrote about implementing this process using the new Vue3 Composition API at https://dev.to/dasdaniel/vue3-compisition-api-craeting-a-draggable-element-fo6

Although it's specifically for Vue3 and not directly copy-paste friendly, the crucial logic is outlined below:

  const onMouseDown = e => {
    let { clientX, clientY } = e;
    position.dragStartX = clientX - position.x;
    position.dragStartY = clientY - position.y;

    position.isDragging = true;

    document.addEventListener("mouseup", onMouseUp);
    document.addEventListener("mousemove", onMouseMove);
  };

  const onMouseMove = e => {
    let { clientX, clientY } = e;
    position.x = clientX - position.dragStartX;
    position.y = clientY - position.dragStartY;
  };

  const onMouseUp = e => {
    let { clientX, clientY } = e;
    position.isDragging = false;
    position.dragStartX = null;
    position.dragStartY = null;
    document.removeEventListener("mouseup", onMouseUp);
    document.removeEventListener("mousemove", onMouseMove);
  };

Answer 2

My approach to achieving draggable functionality differs from using draggable="true". Instead, I prefer utilizing mouse events such as up, down, and move (along with touch equivalents for touch-enabled devices).

This method provides greater control and eliminates the issue of overlapping items being displayed.

The concept behind this technique involves:

Tracking data like position, start drag position (x,y), and whether the item is currently being dragged
Setting isDragging to true and storing the initial drag position coordinates on mouse down event
Updating the position based on the difference between start drag and current clientXY if isDragging === true on mouse move
Resetting isDragging to false on mouse up event

For enhanced functionality, you can dynamically add and remove mousemove and mouseup listeners. Placing the mouse move listener on the document rather than the element itself is a more effective approach.

I recently wrote about implementing this process using the new Vue3 Composition API at https://dev.to/dasdaniel/vue3-compisition-api-craeting-a-draggable-element-fo6

Although it's specifically for Vue3 and not directly copy-paste friendly, the crucial logic is outlined below:

  const onMouseDown = e => {
    let { clientX, clientY } = e;
    position.dragStartX = clientX - position.x;
    position.dragStartY = clientY - position.y;

    position.isDragging = true;

    document.addEventListener("mouseup", onMouseUp);
    document.addEventListener("mousemove", onMouseMove);
  };

  const onMouseMove = e => {
    let { clientX, clientY } = e;
    position.x = clientX - position.dragStartX;
    position.y = clientY - position.dragStartY;
  };

  const onMouseUp = e => {
    let { clientX, clientY } = e;
    position.isDragging = false;
    position.dragStartX = null;
    position.dragStartY = null;
    document.removeEventListener("mouseup", onMouseUp);
    document.removeEventListener("mousemove", onMouseMove);
  };

Answer 3

Answer №2

The attribute "draggable" in HTML is used to determine if an element can be dragged. This behavior is native to browsers, and you can find more information about it here. The reason you see a "ghost image" when trying to drag the bubble is due to this browser behavior.

A simpler method for making an element draggable can be seen in this sample on JSFiddle here.

<div id="app" @mouseup="up" @mousemove="move">
  {{x}}/{{y}} ....... {{coordinates}}
  <div class="bubbleMenuContainer" :style="coordinates" @mousedown="down">
     Test
  </div>
</div>

down(e) {
  this.bubbleMenuClickState = true;
  this.offset = [
    e.target.offsetLeft - e.clientX,
    e.target.offsetTop - e.clientY
  ];
},
up(e) {
  this.bubbleMenuClickState = false;
},
move(e) {
  if (this.bubbleMenuClickState) {
     this.coordinates.left = (e.clientX + this.offset[0]) + "px";
     this.coordinates.top = (e.clientY + this.offset[1]) + "px";
  }
}

Here are the steps:

Add a "mousedown" listener to calculate the offset of the bubble relative to its parent. Without this step, the initial click on the bubble may set its position unexpectedly since no mouse move event has occurred yet.
Include a "mouseup" listener on the bubble's parent (such as #app) to detect when the user releases the click, preventing further movement caused by mouse events.
Implement a "mousemove" listener to update the bubble's position while the user holds and drags it.

Answer 4

The attribute "draggable" in HTML is used to determine if an element can be dragged. This behavior is native to browsers, and you can find more information about it here. The reason you see a "ghost image" when trying to drag the bubble is due to this browser behavior.

A simpler method for making an element draggable can be seen in this sample on JSFiddle here.

<div id="app" @mouseup="up" @mousemove="move">
  {{x}}/{{y}} ....... {{coordinates}}
  <div class="bubbleMenuContainer" :style="coordinates" @mousedown="down">
     Test
  </div>
</div>

down(e) {
  this.bubbleMenuClickState = true;
  this.offset = [
    e.target.offsetLeft - e.clientX,
    e.target.offsetTop - e.clientY
  ];
},
up(e) {
  this.bubbleMenuClickState = false;
},
move(e) {
  if (this.bubbleMenuClickState) {
     this.coordinates.left = (e.clientX + this.offset[0]) + "px";
     this.coordinates.top = (e.clientY + this.offset[1]) + "px";
  }
}

Here are the steps:

Add a "mousedown" listener to calculate the offset of the bubble relative to its parent. Without this step, the initial click on the bubble may set its position unexpectedly since no mouse move event has occurred yet.
Include a "mouseup" listener on the bubble's parent (such as #app) to detect when the user releases the click, preventing further movement caused by mouse events.
Implement a "mousemove" listener to update the bubble's position while the user holds and drags it.

Draggable object animation in VueJS allows for smooth movement of

Answer №1

Answer №2

Similar questions

Keep the sub-menu in a kendo context menu from closing until the user either hovers over another menu item or clicks outside of the current item

Generating a USA map with DataMaps in d3jsonData

Is there a way to trigger a modal to open in VueJS with Bootstrap?

Why do attributes of a directive fail to function within a different directive in AngularJS?

How can I position text below a ticked checkbox?

I need help with a process to extract information from a database and convert it into an object specifically for my situation

Validating forms using TypeScript in a Vue.js application with the Vuetify

Insert a new class within the container div

Experiencing difficulties when integrating the pdf-viewer-reactjs module within Next.js framework

Why won't the button's color change when I try clicking on it?

Exploring Selenium: Clicking on Auto-Complete Suggestions using Python

In terms of function efficiency, what yields better results: using conditional execution or employing conditional exit?

What is the process for sending an image as input to a Django view using an Angular frontend?

Display an icon button when a user edits the text in a text field, and make it disappear once clicked on

When using the `mongoose find()` method, the returned _id may not match the one stored in

Developing Your Own Local Variable in Angular with Custom Structural Directive ngForIn

Uploading files to AWS-S3 using Angular $http PUT method: A step-by-step guide

Eliminate any additional spacing within the pre/code tags

Error encountered: MongoDB cast exception - nested subdocument

Tally of number series in an array