Draggable DIV с JQuery, как применить смещение элемента по нажатию?

javascript jquery drag-and-drop

47 просмотра

1 ответ

Название может быть немного запутанным, я объясню. Я сделал перетаскиваемый div с jQuery (не перетаскиваемый пользовательский интерфейс jQuery). Это код:

let target = null;

this.el.on('mousedown', (ev) => {
    target = this.el;
}).on('mouseup', (ev) => {
    target = null;
});

$(document.body).on('mousemove', 'div', (ev) => {
    if(target) {
        this.x = ev.pageX;
        this.y = ev.pageY;

        this.update(); // update css
    }
});

Код довольно прост, и он работает хорошо. Проблема в том, что когда я перетаскиваю из центра или где-либо, не слева вверху, элемент всегда следует за координацией курсора, поэтому всегда левая верхняя часть элемента размещается там, где я перетаскивал. Да, это правильно, потому что это то, что я сделал, но я хочу переместить элемент с места, где я перетаскиваю.

Это сложно объяснить, поэтому я приведу более легкий. Если в (0,0) есть поле (div), и оно имеет размер 5x5, и переместите поле, нажав (0,0) на (10,10), его назначение должно быть (10,10). Но если я переместу прямоугольник, перетаскивая (2.5,2.5) в (10,10), пункт назначения должен быть (12.5,12.5), а не (10,10).

Но в моем коде назначение (10,10), а не (12.5,12.5), потому что смещение от точки щелчка не применяется при переводе.

Если вы все еще не понимаете, в чем заключается моя проблема, пожалуйста, посмотрите перетаскиваемый пример jquery-ui . Именно это я и хочу сделать точно.

Я знаю, в чем проблема, но все мои попытки не сработают, поэтому мне здесь не нужна помощь. Любой совет будет очень признателен!

Пример здесь !

Автор: modernator Источник Размещён: 08.11.2019 11:15

Ответы (1)


2 плюса

Решение

Просто включите offsetXи offsetYзначения из mousedownсобытия в ваш расчет, путем вычитания его из pageXи pageYв mousemoveобработчике.

$(document).ready(function() {
  function DraggableElement() {
    this.x = 0;
    this.y = 0;
    this.width = 100;
    this.height = 100;

    this.el = $('<div></div>')
    .addClass('box')
    .appendTo($('#playground'));

    this.update();

    var self = this;
    var target = null;
    var offsetX = 0;
    var offsetY = 0;

    this.el.on('mousedown', function(ev) {
      offsetX = ev.offsetX;
      offsetY = ev.offsetY;
      target = self.el;
    }).on('mouseup', function() {
      target = null;
    });

    $(document.body).on('mousemove', 'div', function(ev) {
      if(target) {
        self.x = ev.pageX - offsetX;
        self.y = ev.pageY - offsetY;
        self.update();
      }
    });
  }
  DraggableElement.prototype.update = function() {
    this.el.css({
      top: this.y + 'px',
      left: this.x + 'px',
      width: this.width + 'px',
      height: this.height + 'px'
    })
  };

  var el = new DraggableElement();
});
* {
  padding: 0;
  margin: 0;
}
#playground {
  background-color: #eee;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.box {
  position: absolute;
  background-color: red;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="playground"></div>

Автор: DavidDomain Размещён: 20.08.2016 12:08
Вопросы из категории :
32x32