Как я могу ограничить область перетаскивания? он функционирует сверху и слева, но не справа и снизу - PullRequest
Новая
       13

Как я могу ограничить область перетаскивания? он функционирует сверху и слева, но не справа и снизу

0 голосов
/ 31 октября 2019

Итак, я попытался заблокировать содержимое draggable из overflowing тела.

Это работает сверху и слева.

Я не могу ограничить с правой стороны и снизу. 

            e.pageX -= e.offsetX;
            e.pageY -= e.offsetY;

            // left/right constraint
            if (e.pageX - dragoffset.x < 0) {
                offsetX = 0;
            } else if (e.pageX + dragoffset.x > document.body.clientWidth) {
                offsetX = document.body.clientWidth - e.target.clientWidth;
            } else {
                offsetX = e.pageX - dragoffset.x;
            }

            // top/bottom constraint

            if (e.pageY - dragoffset.y < 0) {
                offsetY = 0;
            } else if (e.pageY + dragoffset.y > document.body.clientHeight) {
                offsetY = document.body.clientHeight - e.target.clientHeight;
            } else {
                offsetY = e.pageY - dragoffset.y;
            }   

            el.style.top = offsetY + "px";
            el.style.left = offsetX + "px";
        }
    });
};

Кроме того, мои div'ы получают glitchy , пока я их перетаскиваю,Они останавливаются только справа и снизу, когда выделен текст внутри них.

Ответы [ 3 ]

0 голосов
/ 05 ноября 2019

спасибо, попробую! Я надеюсь, что это работает

0 голосов
/ 06 ноября 2019

Существует библиотека перетаскивания с возможностью ограничивать перемещения перетаскиваемых объектов

https://github.com/dragee/dragee

По умолчанию она ограничивает перемещения элемента внутри родительского элемента. Он учитывает размер элемента. 

import { Dragable } from 'dragee'
new Draggable(element, { parent: document.body })

В то же время можно использовать пользовательскую связанную функцию 

import { Dragable, BoundToRectangle, Rectangle } from 'dragee'
new Draggable(element, { 
    bound: BoundToRectangle.bounding(Rectangle.fromElement(document.body, document.body))
})

, где BoundToElement описывает необходимые ограничения 

class BoundToRectangle {
  constructor(rectangle) {
    this.rectangle = rectangle
  }

  bound(point, size) {
    const calcPoint = point.clone()
    const rectP2 = this.rectangle.getP3()

    if (this.rectangle.position.x > calcPoint.x) {
      (calcPoint.x = this.rectangle.position.x)
    }
    if (this.rectangle.position.y > calcPoint.y) {
      calcPoint.y = this.rectangle.position.y
    }
    if (rectP2.x < calcPoint.x + size.x) {
      calcPoint.x = rectP2.x - size.x
    }
    if (rectP2.y < calcPoint.y + size.y) {
      calcPoint.y = rectP2.y - size.y
    }

    return calcPoint
  }
}

Размер элемента вы можете рассчитать следующим образом: 

let width = parseInt(window.getComputedStyle(element)['width'])
let height = parseInt(window.getComputedStyle(element)['height'])

Я также могу предложить использовать свойство translate3d для движений вместо позиций слева и сверху, потому что это более эффективно

0 голосов
/ 01 ноября 2019

Я предполагаю, что, поскольку перетаскиваемый элемент является элементом dom, он будет перемещать ширину и высоту тела при перемещении вправо или вниз, это изменяет размер тела, поэтому использование размера тела может быть неправильным способом. Возможно, вы можете использовать window.width и window.height или около того, чтобы ограничить область значениями, которые перетаскиваемый элемент не может изменить. Надеюсь, это поможет.

...