catc / displace Goto Github PK

I have set of divs with drag handle and on "window.resize" event I call "displace.reinit()" on each div.
And after that then I try to drag, drag mode not stoped after mouseup.

I like the simplicity and functionality of this library! Thanks also for the online demos - they're really well prepared and necessary.

I wonder whether this could be efficiently used also for long lists (thousands of items) wherease one would be free to select multiple items and then drag them all at once.

Any suggestions?

Hello,

I have a problem to set displace to canvas. It returns me this error. Is it possible to set relativeTo to canvas element?

ERROR TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. at isRelative (displace.js:232)

Thanks

I was trying to implement the library to my code and received this error message. Decided to had a look at the code and realized that the variable is called displacejs. Changing to :

const el = document.querySelector('#ball-1');
displacejs(el);

Now, no error messages are appearing. I'd just like to ask if the code and documentation are not matching of ir I am looking at the wrong place. Thank you!

Here's a ridiculous example: https://jsfiddle.net/yyu3bsxs/

Optimized

package.json

  "main": "dist/displace.min.js",

to

  "main": "src/displace.js",

src/displace.js

dispatch

import {
	generateClamp,
	isRelative,
	generateMoveFn
} from './utils'; //updated

import {
	// mouse
	mousedown,
	mouseup,

	// touch
	touchstart,
	touchstop
} from './events';  // updated

What happens: When the draggable element is child of a scaled element (like transform: scale(2);) the draggable element has an offset while dragging: It moves faster (scale>1) or slower (scale<1)than the cursor.
What should/could happen: Even if it is child of a scaled element, the draggable element could be normally draggable.

Use cases: Applications in which Elements are arranged; adjustment of element size to available space.

Existing Implementations: jsPlumb uses a model in which the programmer registers changes of the scale factor of the container element: https://jsplumbtoolkit.com/doc/zooming.html

I tryed to play with onMouseMove event, but looks like displace init cords of element after that event
var scale = /* get the scale */ x = event.pageX / scale, y = event.pageY / scale;

Hello! I need some help. I can't find any examples how to use reinit() function, and I don't know it works or not.

See example code below:

const displace = require('displacejs');

/**
* Set displace blocks for labels
*/
function setDisplace() {
   const elements = document.getElementsByClassName('gift-card-label');
   const options = {
       constrain: true
   };

   for(let i = 0; i < elements.length; i++) {
       displace(elements[i], options);
   }
}

setDisplace();

window.addEventListener("orientationchange", function() {
   // need to reinit on screen orientaion change on mobile. how does reinit call?
});

Thanks for attention

This bug occurs when you drag an element (mouse leftclick is down) and you also right click.
It basically binds the element to the pointer via a mousemove event.

I found a fix for this:
In dist/displace.js on line 302 i added this if statement:

if(e && e.button === 0)
events.mousemove = mousemove.bind(this, wOff, hOff);

it basically binds the mousemove event only if the event is triggered by the leftclick.

feature request.
Would it be possible to add the possibility to pinch the element with 2 fingers that would enable the user to zoom-in (increase the size of the element) or zoom-out (decrease the size of the element)?

Is it possible to add a feature to move the element with respect to the screen? i.e., the element doesn't move when scrolling down. Thank you!

I couldn't Figure out how this works or removes the event listener, can you please guide me on its usage
thanks
tbh great library.

Hello,
I tried to use displace on one of my app. It works really well on desktop computer using my mouse.
When I try to use it on my android phone screen, nothing happen, I cannot move the DOM object inside my screen.
Can we add the ability for displace to move object around the screen on a touchscreen device such as Mobile phone and tablet?

hey @catc,

thank you for creating this library. it is really useful and i use it in one of my projects.

is there a way to install the library directly from npm? i noticed that the name displace is already used by an another (empty) package, so that npm install displace doesn't seem to work. has this library been published under another name?