Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript] draggable problem z pozycją obiektu podczas ruchu.
KotWButach
post 25.06.2019, 20:34:11
Post #1





Grupa: Zarejestrowani
Postów: 361
Pomógł: 10
Dołączył: 8.02.2012

Ostrzeżenie: (0%)
-----

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ń sad.gif

[PHP] pobierz, plaintext 
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4.  
  5. <head>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
  7.     <title>Drag/Drop/Bounce</title>
  8.     <style>
  9.         #container {
  10.             width: 100%;
  11.             height: 400px;
  12.             background-color: #333;
  13.             overflow: hidden;
  14.             border-radius: 7px;
  15.             touch-action: none;
  16.             position: relative;
  17.         }
  18.  
  19.         #item, #item2 {
  20.             width: 100px;
  21.             height: 100px;
  22.             background-color: rgb(245, 230, 99);
  23.             border: 10px solid rgba(136, 136, 136, .5);
  24.             border-radius: 50%;
  25.             touch-action: none;
  26.             user-select: none;
  27.             position: absolute;
  28.             top: 100px;
  29.             left: 400px;
  30.         }
  31.  
  32.         #item:active, #item2:active {
  33.             background-color: rgba(168, 218, 220, 1.00);
  34.         }
  35.  
  36.         #item:hover, #item2:hover {
  37.             cursor: pointer;
  38.             border-color: rgba(168, 218, 220, .70);
  39.         }
  40.     </style>
  41. </head>
  42.  
  43. <body>
  44.  
  45.  
  46. <div id="outerContainer">
  47.     <div id="container">
  48.         <div id="item2">
  49.  
  50.         </div>
  51.     </div>
  52. </div>
  53.  
  54. <script>
  55.  
  56.  
  57.     class Move {
  58.         constructor(element) {
  59.  
  60.             this.element = undefined;
  61.             this.draggable = undefined;
  62.  
  63.             this.getElement(element);
  64.             this.initDraggable();
  65.             this.moveDraggable();
  66.             this.removeDraggable();
  67.  
  68.         }
  69.  
  70.         getElement(element) {
  71.             this.element = document.querySelector(element);
  72.         }
  73.  
  74.         initDraggable() {
  75.             this.element.onmousedown = () => {
  76.                 this.draggable = this.element;
  77.             }
  78.         }
  79.  
  80.         moveDraggable() {
  81.             document.onmousemove = (e) => {
  82.  
  83.                 let mouseDownX = e.clientX;
  84.                 let mouseDownY = e.clientY;
  85.  
  86.                 if (this.draggable == undefined)
  87.                     return;
  88.  
  89.                 this.draggable.style.left = mouseDownX + "px";
  90.                 this.draggable.style.top = mouseDownY + "px";
  91.             }
  92.         }
  93.  
  94.         removeDraggable() {
  95.             document.onmouseup = (e) => {
  96.                 this.draggable = undefined;
  97.             }
  98.         }
  99.  
  100.     }
  101.  
  102.  
  103.     new Move('#item2');
  104.  
  105. </script>
  106. </body>
  107.  
  108. </html>
  109.  
[PHP] pobierz, plaintext
Go to the top of the page
+Quote Post

Posty w temacie
- KotWButach   [JavaScript] draggable problem z pozycją obiektu podczas ruchu.   25.06.2019, 20:34:11
- - trueblue   Po prostu przesuń go o połowę szerokości i wysokoś...   25.06.2019, 20:41:08
- - KotWButach   Chodzi o to, by element nie przesunął się względem...   25.06.2019, 20:56:08
- - trueblue   W momencie łapania oblicz różnicę między położenie...   25.06.2019, 21:16:10
- - KotWButach   Mam dalej niestety problem, proszę pomóż, co robię...   26.06.2019, 14:57:56
- - trueblue   Przeczytaj jeszcze raz mój post.   26.06.2019, 17:15:09
- - KotWButach   w momencie łapania, dobra będę próbował . Dzieki ...   26.06.2019, 19:07:03
- - SmokAnalog   Przeciąganie działa ładnie, ale mam sporo uwag do ...   27.06.2019, 00:19:17

« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 28.04.2024 - 03:24
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn