catc / displace Goto Github PK
View Code? Open in Web Editor NEWMinimal javascript library for creating movable DOM elements
Home Page: https://catc.github.io/displace
License: MIT License
Minimal javascript library for creating movable DOM elements
Home Page: https://catc.github.io/displace
License: MIT License
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:
Line 302 in 12561b1
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.
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 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 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.
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
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!
"main": "dist/displace.min.js",
to
"main": "src/displace.js",
dispatch
import {
generateClamp,
isRelative,
generateMoveFn
} from './utils'; //updated
import {
// mouse
mousedown,
mouseup,
// touch
touchstart,
touchstop
} from './events'; // updated
Here's a ridiculous example: https://jsfiddle.net/yyu3bsxs/
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?
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?
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.
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)?
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!
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.