search

anseki / plain-draggable

The simple and high performance library to allow HTML/SVG element to be dragged.
https://anseki.github.io/plain-draggable/
MIT License
765 stars 96 forks source link

Help with unbounded element #101

Closed Stanteq closed 3 years ago

Stanteq commented 3 years ago

Hi, I really appreciate this script. All examples are bounded by a container but there is a way to make a draggable element unbounded? To be able to move the element "infinitely" over the borders. Thank you.

for example: https://jerosoler.github.io/Drawflow/

anseki commented 3 years ago

Hi @Stanteq, thank you for the comment. You can specify containment option.

Stanteq commented 3 years ago

Hi @Stanteq, thank you for the comment. You can specify containment option.

With the containment the draggable block will stop on the borders (in case of missing it will take the parent one) but what i want is to drag outside the borders.

anseki commented 3 years ago

Sorry, do you mean that specifying <body> element for the containment option didn't work?

Stanteq commented 3 years ago

Sorry, do you mean that specifying <body> element for the containment option didn't work?

 new PlainDraggable(document.getElementById('target'), {
    containment: document.getElementsByTagName('body')[0],
});

Oviously it works and the block stops at the edge of the body (containment). What I want to achieve is to go outside of the containment. Imagine if you want to create a draw flow of infinite space which dont need a containment to limit this space.

anseki commented 3 years ago

Hmm... I can't understand that... Try this:

new PlainDraggable(document.getElementById('target'), {
  containment: {left: '-50%', top: '-50%', right: '150%', bottom: '150%'}
});

Maybe this is meaningless because mouse pointer can't be caught outside of document.

Stanteq commented 3 years ago

Your solution can solve like a part of the problem.

Imagine you have a big draggable box and you move it arround. Maybe half of it can stay outside of the "visible" screen because you have a containment left: -50% etc. but not an infinite in case you move the containment to see the hidden part of the draggable blocks and drag it again (like in this example https://jerosoler.github.io/Drawflow/). Maybe a solution (new feature) is to have a flag to decide if the draggable blocks should stay in the containment or not.

P.S. Anyway it still e great script. Thank you

anseki commented 3 years ago

Hmm... Sorry, I couldn't understand what you want to do. Anyway, this library is unsuitable for your app. You had better use another library that is suitable for your app.

Stanteq commented 3 years ago

Hmm... Sorry, I couldn't understand what you want to do. Anyway, this library is unsuitable for your app. You had better use another library that is suitable for your app.

Fixed it by comenting this function:

 function fix() {
    if (props.minLeft >= props.maxLeft) { // Disabled
      position.left = elementBBox.left;
    } else if (position.left < props.minLeft) {
      position.left = props.minLeft;
    } else if (position.left > props.maxLeft) {
      position.left = props.maxLeft;
    }
    if (props.minTop >= props.maxTop) { // Disabled
      position.top = elementBBox.top;
    } else if (position.top < props.minTop) {
      position.top = props.minTop;
    } else if (position.top > props.maxTop) {
      position.top = props.maxTop;
    }
  }

As a side effect it not working anymore the snap features in case if it is outside the containment.

anseki commented 3 years ago

I see. :smile: