Witam,
mam problem, mianowicie podczas ruchu, przenoszenia obiektu, obiekt dostawia się po prawej stronie myszki od dołu.
Jak zniwelować ten efekt?
Głowie się już cały dzień
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <title>Drag/Drop/Bounce</title> <style> #container { width: 100%; height: 400px; background-color: #333; overflow: hidden; border-radius: 7px; touch-action: none; position: relative; } #item, #item2 { width: 100px; height: 100px; background-color: rgb(245, 230, 99); border: 10px solid rgba(136, 136, 136, .5); border-radius: 50%; touch-action: none; user-select: none; position: absolute; top: 100px; left: 400px; } #item:active, #item2:active { background-color: rgba(168, 218, 220, 1.00); } #item:hover, #item2:hover { cursor: pointer; border-color: rgba(168, 218, 220, .70); } </style> </head> <body> <div id="outerContainer"> <div id="container"> <div id="item2"> </div> </div> </div> <script> class Move { constructor(element) { this.element = undefined; this.draggable = undefined; this.getElement(element); this.initDraggable(); this.moveDraggable(); this.removeDraggable(); } getElement(element) { this.element = document.querySelector(element); } initDraggable() { this.element.onmousedown = () => { this.draggable = this.element; } } moveDraggable() { document.onmousemove = (e) => { let mouseDownX = e.clientX; let mouseDownY = e.clientY; if (this.draggable == undefined) return; this.draggable.style.left = mouseDownX + "px"; this.draggable.style.top = mouseDownY + "px"; } } removeDraggable() { document.onmouseup = (e) => { this.draggable = undefined; } } } new Move('#item2'); </script> </body> </html>
Po prostu przesuń go o połowę szerokości i wysokości.
Chodzi o to, by element nie przesunął się względem wcześniejszej pozycji a więc, jeżeli chwyciłem go w np prawym dolnym rogu, to żebym za ten róg ciągnął. I problemem jest to gdzie wywoływać i co .
W momencie łapania oblicz różnicę między położeniem kursora, a położeniem elementu. Tej różnicy używaj podczas przesuwania.
Mam dalej niestety problem, proszę pomóż, co robię źle.
Jeżeli odejmę różnice to box stoi w miejscu .
Aktualnie całość wygląda tak:
https://codepen.io/kotbezbutow/pen/VJMbeK
moveDraggable() { document.onmousemove = (e) => { let elementX = this.element.offsetLeft; let elementY = this.element.offsetTop; let mouseDownX = e.clientX; let mouseDownY = e.clientY; if (this.draggable == undefined) { return; } // console.log('elementX ' + elementX); // console.log('elementY ' + elementY); // console.log('mouseDownX ' + mouseDownX); // console.log('mouseDownY ' + mouseDownY); console.log('x ' + (mouseDownX - elementX)); // console.log('x ' + (mouseDownX - (mouseDownX - elementX))); let roznica = (mouseDownX - elementX); this.draggable.style.left = mouseDownX - roznica + "px"; this.draggable.style.top = mouseDownY - 40 + "px"; } }
Przeczytaj jeszcze raz mój post.
w momencie łapania, dobra będę próbował .
Dzieki za pomoc
class Move { constructor(element) { this.border = undefined; this.draggable = undefined; document.querySelector("body").addEventListener("mousedown", (e) => { // get element and init draggable this.draggable = e.target.closest(element); let mouseDownX = e.clientX; let mouseDownY = e.clientY; let elementX = this.draggable.offsetLeft; let elementY = this.draggable.offsetTop; this.differanceX = mouseDownX - elementX; this.differanceY = mouseDownY - elementY; // move draggable document.addEventListener('mousemove', (e) => { // return if end if (this.draggable == undefined) { return; } let mouseDownX = e.clientX; let mouseDownY = e.clientY; this.draggable.style.left = mouseDownX - this.differanceX + "px"; this.draggable.style.top = mouseDownY - this.differanceY + "px"; }); document.addEventListener('mouseup', (e) => { this.draggable = undefined; }); }); } }
Przeciąganie działa ładnie, ale mam sporo uwag do Twojego kodu:
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)