Перетащите элемент по экрану (HTML5 / JQuery)

Question

Я пытаюсь создать какую-то функциональность, похожую на «щелчок».Вместо того, чтобы просто перетаскивать объект по экрану, я бы хотел перетащить и выбросить / отпустить его в определенном месте.Есть идеи, как этого добиться?

Извините, у меня нет здесь фрагментов кода ... но я просто не знаю, с чего начать.

Спасибо!--moe

Answer 1

Вы можете использовать обработчики событий mousedown, mousemove и mouseup, чтобы получить события мыши с позициями курсора, в которых они произошли.Вам нужно сохранить текущую позицию курсора (startCursorPos) и позицию элемента (startElementPos) в mousedown.При каждом событии mousemove вы можете вычислить разницу между текущей позицией курсора и startCursorPos, добавить результат в startElementPos и ​​использовать результат в качестве новой позиции элемента.Это реализует базовое поведение перетаскивания.

Чтобы получить бросок, вам также необходимо записать текущее время в mousedown и mouseup.В сочетании с позициями вы сможете рассчитать скорость движения и использовать ее при наведении мыши, чтобы продолжить движение в течение некоторого времени (например, используя setInterval).

var foo=document.getElementById("foo");
var isMoving, startCursorPos, startElementPos, startTime, newPos;
function Point(x,y) {
  this.x=x; this.y=y;
}
Point.fromElement=function(el) {
  return new Point(parseInt(el.style.left), parseInt(el.style.top));
}
Point.sum = function(a,b) {
  return new Point(a.x+b.x, a.y+b.y);
}
Point.difference = function(a,b) {
  return new Point(a.x-b.x, a.y-b.y);
}
Point.prototype.multiply = function(factor) {
  return new Point(this.x*factor, this.y*factor);
}
Point.prototype.distance = function() {
  return Math.sqrt(this.x*this.x + this.y*this.y);
}
Point.prototype.toString = function() {
  return this.x + "x" + this.y;
}
Point.prototype.moveElement = function(el) {
  el.style.left = this.x + "px"; el.style.top = this.y + "px";
}
foo.addEventListener("mousedown", function(e) {
  startCursorPos = new Point(e.pageX, e.pageY);
  startElementPos = Point.fromElement(foo);
  startTime = +new Date();
  isMoving=true;
},false);

window.addEventListener("mousemove", function(e) {
  if (isMoving) {
    var cursorpos = new Point(e.pageX, e.pageY);
    newPos = Point.sum(startElementPos, Point.difference(cursorpos, startCursorPos));
    //console.log(startElementPos, cursorpos, newPos);
    newPos.moveElement(foo);
  }
},false);

window.addEventListener("mouseup", function(e) {
  if (isMoving) {
    isMoving=false;
    var cursorpos = new Point(e.pageX, e.pageY);
    var interval = +new Date() - startTime;
    var movement = Point.difference(cursorpos, startCursorPos).multiply(1/interval);
    var speed = movement.distance();
    console.log(interval, speed, ""+movement);
    moveOn(newPos, movement, speed);
  }
},false);

function moveOn(startPos, movement, speed) {
  startPos = Point.sum(startPos, movement.multiply(speed*200))
  startPos.moveElement(foo);
  if (speed > 10) 
    setTimeout(function() {
      moveOn(startPos, movement, speed/2);
    }, 100);
}

#foo { position:absolute; width:50px;height:50px; background:magenta; }

<div id="foo" style="top:50px; left:50px;"></div>