Automatic drag and drop with a click

Question

I'm looking for an automatic drag and dropper. First, when I click anywhere on the screen, get coordinates, then drag and drop an element with the ID of "ball". using jQuery OR javascript.

I coded a similar script to what I want, but this script got patched when the website's client got updated. This one automatically dragged and dropped when I pressed key 1(keycode 49),

(function () {
  'use strict';

  var mouseX = 0;
  var mouseY = 0;
  var invName = '';
  var timer = 0;
  document.body.addEventListener('mousemove', function (e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
  });
  $('.inventory-box').mousedown(function (e) {invName = e.currentTarget.id;});

  function drop () {
    $('#' + invName).trigger($.Event('mousedown', {button: 0}));
    $('body').trigger($.Event('mouseup', {
      button: 0,
      clientX: mouseX,
      clientY: mouseY
    }));
    timer = setTimeout(drop, 100);
  }

  window.addEventListener('keyup', function (e) {
    if (e.keyCode == 49 && !timer) {
      invName = 'ball';
      drop();
      setTimeout(function () {
        (clearTimeout(timer), timer = 0);
      }, 20);
    }

  });

})();

fix your code indentation please. why do you use setTimeout? it's all client side code? why can't you at least try to make the code run here on stack or in a jsfiddle like this awesome amazing question poster did? https://stackoverflow.com/questions/22822285/combining-change-mouseup-mousedown-mouseout-keyup-and-keydown-into-the-one-f — react_or_angluar, Feb 01 '21 at 15:50
When I pressed key `1`, it kept dropping the ball, so I used setTimeout to stop dropping after 20 ms when key `1` is pressd. — Lazaro YT, Feb 01 '21 at 15:56

terrymorse · Answer 1 · 2021-02-01T17:32:45.403

when I click anywhere on the screen, it gets it's coordinates, then drag and drops an element with the ID of "ball"

Here's a very simple vanilla JavaScript method that will locate an element with the ID of "ball" at the cursor location upon click.

The "ball" will follow the cursor until the next click, then the ball will be dropped at the click location.

const ball = document.getElementById('ball');
const ballHalfHeight = Math.round(ball.offsetHeight / 2);
const ballHalfWidth = Math.round(ball.offsetWidth / 2);
let dragState = false;

// move ball to position
function moveBallTo(x, y) {
  ball.style.top = y - ballHalfHeight + 'px';
  ball.style.left = x - ballHalfWidth + 'px';
}

// listen for 'mousemove' and drag ball
function dragListener(evt) {
  const {clientX, clientY} = evt;
  moveBallTo(clientX, clientY);
};

// respond to 'click' events (start or finish dragging)
window.addEventListener('click', (evt) => {
  const {clientX, clientY} = evt;
  moveBallTo(clientX, clientY);
  ball.classList.remove('hidden');

  // handle dragging
  if (!dragState) {
    window.addEventListener('mousemove', dragListener);
  } else {
    window.removeEventListener('mousemove', dragListener);
  }
  dragState = !dragState;
});

.div-ball {
  position: fixed;
  background-color: dodgerblue;
  width: 2rem;
  height: 2rem;
  border-radius: 1rem;
}

.hidden {
  opacity: 0;
}

<body>
  <h4>Click anywhere</h4>
  <div class="div-ball hidden" id="ball"></div>
</body>

This only repositions the ball element, I want this to actually drag and drop the ball eelmeent — Lazaro YT, Aug 25 '21 at 21:31

Automatic drag and drop with a click

1 Answers1