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

Clearing the Redux state in my app upon exiting the page

When reference variables are utilized before being parsed, what happens?

Creating a series of promises in a structured chain

Showing text instantly upon clicking a radio button, in real-time

Modifying the State array is beyond my control

Dealing with a frustrating roadblock in Three.js where you encounter an "Unknown format" error while trying to work with

How to set up 'ng serve' command in Angular to automatically open a private browsing window?

Is there a way for me to create a route similar to Instagram's setup, such as localhost:3000

The Ajax request fails to send the form files

Transforming JSON keys in Angular

Issue with Jquery Slider Showing Empty Slide

The design problem arises from using jQuery to dynamically prepare the table body at runtime

Ways to display a sorting icon depending on a calculated attribute

Generate 2 configurations for webpack

Achieving efficient filtering with multiple search parameters using a for loop in Vue Bootstrap

Tips for transforming a JSON object (originated from jquery-css-parser) into properly formatted CSS code

Error: Disappearing textarea textContent in HTML/TS occurs when creating a new textarea or clicking a button

Implementing model synchronization on server initialization with Next.js and sequelize

Create an Interactive Data Visualization with JSON using CanvasJS Charts

I am dynamically generating table rows and populating them with data. However, I encountered an issue with retrieving the data by their respective IDs