The act of manually moving an object with a mouse

Question

The act of manually moving an object with a mouse

I've been holding onto this question for quite some time, hesitant to ask because of potential backlash. Nevertheless, here I am finally sharing my dilemma in hopes of finding a solution...

Imagine there's an element on the page that can be dragged with the ID "dragme"... Now, instead of manually dragging it to a specific location every time, is there a way to automate this task using a function? Let's call this function "dropElement". Essentially, I want to simulate dragging "dragme" to wherever my mouse cursor is positioned using a script in jQuery or JavaScript.

This is what I've attempted so far:

(function() {
    'use strict';

    var mouseX = 0;
    var mouseY = 0;
    var timer = 0;
    
    document.body.addEventListener("mousemove", function(e) {mouseX = e.clientX; mouseY = e.clientY;});
    
    function dropElement() {
        $("#dragme").trigger($.Event("mousedown", {button: 0}));
        $("body").trigger($.Event("mouseup", {button: 0, clientX: mouseX, clientY: mouseY}));
        timer = setTimeout(dropElement, 100);
    }
    
    dropElement(); // executes function and drops "dragme" to mouse position

javascript html jquery css mouseevent

Answer 1

Answer №1

I found the solution in the question to be a bit intricate, especially with the inclusion of a timing function.

Instead of delving into complexities, I decided to simplify things by utilizing vanilla JavaScript and focusing on the sequence of actions. When a user moves the mouse, we only need to pay attention if they have clicked within the specific element that we want to drag. This code snippet introduces a variable called isDown, which is toggled to true when the user clicks down on the element.

Subsequently, it listens for the mousemove event across the entire window, and if isDown is true, it allows the user to drag the element.

In addition, it tracks the mouseup event on the window to reset isDown.

The rationale behind handling certain events on the actual element and others on the window is due to the dynamic nature of movement – there might be instances where the mouse leaves the window before being released, for instance.

let isDown = false;
const dragMe = document.querySelector('.dragme');
dragMe.addEventListener('mousedown', function() {
  isDown = true;
});
window.addEventListener('mouseup', function() {
  isDown = false;
});
window.addEventListener('mousemove', function() {
  if (isDown) {
    dragMe.style.top = event.clientY + 'px';
    dragMe.style.left = event.clientX + 'px';
  }
});

.dragme {
  width: 5em;
  height: 5em;
  background-color: cyan;
  position: relative;
  top: 0;
  left: 0;
}

<div class="dragme">Drag me</div>

Answer 2

I found the solution in the question to be a bit intricate, especially with the inclusion of a timing function.

Instead of delving into complexities, I decided to simplify things by utilizing vanilla JavaScript and focusing on the sequence of actions. When a user moves the mouse, we only need to pay attention if they have clicked within the specific element that we want to drag. This code snippet introduces a variable called isDown, which is toggled to true when the user clicks down on the element.

Subsequently, it listens for the mousemove event across the entire window, and if isDown is true, it allows the user to drag the element.

In addition, it tracks the mouseup event on the window to reset isDown.

The rationale behind handling certain events on the actual element and others on the window is due to the dynamic nature of movement – there might be instances where the mouse leaves the window before being released, for instance.

let isDown = false;
const dragMe = document.querySelector('.dragme');
dragMe.addEventListener('mousedown', function() {
  isDown = true;
});
window.addEventListener('mouseup', function() {
  isDown = false;
});
window.addEventListener('mousemove', function() {
  if (isDown) {
    dragMe.style.top = event.clientY + 'px';
    dragMe.style.left = event.clientX + 'px';
  }
});

.dragme {
  width: 5em;
  height: 5em;
  background-color: cyan;
  position: relative;
  top: 0;
  left: 0;
}

<div class="dragme">Drag me</div>

Answer 3

Answer №2

I trust that this example provides assistance to you

var drag = {
   elem: null,
   x: 0,
   y: 0,
   state: false
 };
 var delta = {
   x: 0,
   y: 0
 };
 function dropElement(e){
   var cur_offset = $("#autoDrag").offset();
   $("#autoDrag").animate({
       left: (e.pageX),
       top: (e.pageY )
     });
 }
 $(document).mousedown(function(e) {
 dropElement(e);
 })
 $("#dragMe").mousedown(function(e) {
     drag.elem = dragMe;
     drag.x = e.pageX;
     drag.y = e.pageY;
     drag.state = true;
 })
$(document).mousemove(function(e) {
   if ( drag.state) {
     delta.x = e.pageX - drag.x;
     delta.y = e.pageY - drag.y;

     var cur_offset = $(drag.elem).offset();
     $(drag.elem).offset({
       left: (cur_offset.left + delta.x),
       top: (cur_offset.top + delta.y)
     });

     drag.x = e.pageX;
     drag.y = e.pageY;
   }
 })
 $("#dragMe").mouseup(function() {
    drag.state = false;
 })

#dragMe {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  padding:10px;
  background-color: #00a1ff;
  color: white;
  border-radius: 50px;
}
#autoDrag {
  position: absolute;
  right:0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
  width: 80px;
  height: 80px;
  padding:10px;
  background-color: #ff00ff;
  color: white;
  border-radius: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span id="dragMe">DragMe!</span>
<span id="autoDrag">Click somewhere I will be there!</span>

Answer 4

I trust that this example provides assistance to you

var drag = {
   elem: null,
   x: 0,
   y: 0,
   state: false
 };
 var delta = {
   x: 0,
   y: 0
 };
 function dropElement(e){
   var cur_offset = $("#autoDrag").offset();
   $("#autoDrag").animate({
       left: (e.pageX),
       top: (e.pageY )
     });
 }
 $(document).mousedown(function(e) {
 dropElement(e);
 })
 $("#dragMe").mousedown(function(e) {
     drag.elem = dragMe;
     drag.x = e.pageX;
     drag.y = e.pageY;
     drag.state = true;
 })
$(document).mousemove(function(e) {
   if ( drag.state) {
     delta.x = e.pageX - drag.x;
     delta.y = e.pageY - drag.y;

     var cur_offset = $(drag.elem).offset();
     $(drag.elem).offset({
       left: (cur_offset.left + delta.x),
       top: (cur_offset.top + delta.y)
     });

     drag.x = e.pageX;
     drag.y = e.pageY;
   }
 })
 $("#dragMe").mouseup(function() {
    drag.state = false;
 })

#dragMe {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  padding:10px;
  background-color: #00a1ff;
  color: white;
  border-radius: 50px;
}
#autoDrag {
  position: absolute;
  right:0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
  width: 80px;
  height: 80px;
  padding:10px;
  background-color: #ff00ff;
  color: white;
  border-radius: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span id="dragMe">DragMe!</span>
<span id="autoDrag">Click somewhere I will be there!</span>

The act of manually moving an object with a mouse

Answer №1

Answer №2

Similar questions

about float and width

Determine the total number of active links on an HTML webpage using F#

Protractor reusable variables

Show an xeditable form that can be edited within a popup window

Tips for aligning a row at the bottom within a nested column

Having trouble loading the .php file with my Ajax request

Ways to output a string array from a JSON object containing additional attributes

Is it possible to disregard JQMIGRATE warnings for AngularJS v1.4.5 and proceed with upgrading AngularJS?

The background image in the header does not fully extend to cover all of the header content

leveraging ajax callbacks, the significance of http status codes and essential validation concepts

Ways to retrieve information from JSON

Utilize the HTTP path to designate the currently active tab

Extract objects from a nested array using a specific identifier

Animating elements in Nativescript Vue using v-show and transitions

Understanding how to properly handle the data sent by an ajax request in a NodeJS server

Tips for adjusting the width of items within the Box element in Material UI React

Diagnosing Issues with Yii2's $(document).ready Function

What is the best way to align a div right below an image that has been clicked on?

Activate $digest when a variable is modified by a node.js function

Guide on invoking a method from a class in a different file