Переместить несколько div на одной странице - PullRequest
Новая
       10

Переместить несколько div на одной странице

0 голосов
/ 13 июня 2018

Моя проблема в том, что когда я добавляю слушателя перемещения мыши в документ, все элементы div перемещаются, но когда я добавляю слушателя перемещения мыши в свой элемент, мне приходится медленно перемещать курсор.

Вот мой код: 

let componentsItems = document.getElementsByClassName("componentItem");
[].forEach.call(componentsItems, function (componentItem) {
    componentItem.addEventListener("click", function (event) {
        let selectedComponent = getComponentToDisplay(event.target.getAttribute("data-exchange"));

        let mapContainer = document.getElementById("mapContainer");
        let mainElement = document.createElement("div");
        mainElement.innerHTML = "test";

        mainElement.style.position = "absolute";
        mapContainer.appendChild(mainElement);

        mainElement.addEventListener("mouseup", function (e) {
            isDown = false;
        });

        mainElement.addEventListener("mousedown", function (e) {
            isDown = true;
            offset = [
                mainElement.offsetLeft - e.clientX,
                mainElement.offsetTop - e.clientY
            ];
        });

        document.addEventListener("mousemove", function (e) {
            e.preventDefault();
            mousePosition = {
                x: e.clientX,
                y: e.clientY
            };

            let left = (mousePosition.x + offset[0]);
            let top = (mousePosition.y + offset[1]);
            if(isDown){
                if(mapContainer.offsetTop < top && mapContainer.offsetWidth > left){
                    mainElement.style.left =  left + 'px';
                    mainElement.style.top = top + 'px';
                }
            }
        });
    });
});

Для каждого компонента в моем меню я добавляю прослушиватель onclick к элементу appendChild в div "MapContainer".

1 Ответ

0 голосов
/ 13 июня 2018

Проблема перетаскивания.

Проблема в том, что вы присоединяете к документу несколько слушателей перемещения мыши, и каждый из них имеет каждый из основных элементов.

Решение:

Запомните, какой элемент мы собираемся переместить. 

mainElement.addEventListener("mousedown", function (e) {
  isDown = true;
  element = mainElement;
  offset = [
    mainElement.offsetLeft - e.clientX,
    mainElement.offsetTop - e.clientY
  ];
});

В внешней области видимости (за пределами foreach) создайте уникальный слушатель события mousemove и обновите элемент , о котором мы упоминали ранее. 

document.addEventListener("mousemove", function (e) {
  e.preventDefault();
  mousePosition = {
    x: e.clientX,
    y: e.clientY
  };

  let left = (mousePosition.x + offset[0]);
  let top = (mousePosition.y + offset[1]);
  if(isDown){
    if(mapContainer.offsetTop < top && mapContainer.offsetWidth > left){
      element.style.left =  left + 'px';
      element.style.top = top + 'px';
    }
  }
});

Другими способами решения этой проблемы является создание (и удаление) обработчика событий в обработчиках событий mousedown и mouseup соответственно.Но я считаю, что это менее эффективно и определенно сложнее.

...