ugrás a tartalomhoz

JavaScript - "Húzd és ejtsd" értéknöveléssel

Tashi · 2012. Május. 2. (Sze), 20.10
Sziasztok!

Készítettem egy "fogd és ejtsd" alkalmazást. Azt szeretném megvalósítani, hogy ha valamelyik ételt a kosárhoz húzzák akkor egy függvényhez, aminek az eredeti értéke 0, hozzárendeljük a termék árát, pl. 2.50€ = Döner; 3,50 = Dürüm; ...

A végén pedig kiírjuk a függvény értékét.

Kérlek segítsetek, hogy ez miként lenne megoldható!

A segítséget előre is köszönöm!
  1. <html>  
  2.   
  3. <head>  
  4.   
  5. <title>Drag and Drop</title>  
  6.   
  7. <link rel="stylesheet" type="text/css" href="dragdrop.css">  
  8.   
  9. <script language="javascript" type="text/javascript"  
  10.   
  11.    src="dragdrop.js">  
  12.   
  13. </script>  
  14.   
  15. </head>  
  16.   
  17. <body>  
  18.   
  19. <div class="drag" id="drag1">  
  20.   
  21. <h3>Döner</h3>  
  22.   
  23. <p><img src="images/doener.png" border="0" width="270px" /></p>  
  24.   
  25. </div>  
  26.   
  27. <div class="box">  
  28.   
  29. <p>Kosár</p>  
  30.   
  31. </div>  
  32.   
  33. <div class="drag" id="drag2">  
  34.   
  35. <h3>Dürüm</h3>  
  36.   
  37. <p><img src="images/dueruem.jpg" border="0" width="270px" /></p>  
  38.   
  39. </div>  
  40.   
  41. </body>  
  42.   
  43. </html>  
  1. .drag {  
  2.    position: absolute;  
  3.    width: 300px;  
  4.    border: 2px solid black;  
  5.    border-top: 20px solid black;  
  6.    top: 100px;  
  7.    padding: 5px;  
  8. }  
  9. #drag1 { left: 20px; }  
  10. #drag2 { left: 190px; }  
  11. #drag3 { left: 360px; }  
  12. #drag4 { left: 530px; }  
  13. .box { position: releative; float: left; margin: 0 auto 0 auto; width: 300px; height: 300px; bgcolor: #33333; }  
  1. var obj,x,y,dx,dy;  
  2. function Setup() {  
  3.   if (!document.getElementsByTagName) return;  
  4.   divs = document.getElementsByTagName("DIV");  
  5.   for (i=0; i<divs.length; i++) {  
  6.     if (divs[i].className != "drag") continue;  
  7.     divs[i].onmousedown = Drag;  
  8.   }  
  9. }  
  10. function Drag(e) {  
  11.   if (!e) var e = window.event;  
  12.   obj = (e.target) ? e.target: e.srcElement;  
  13.   obj.style.borderColor="red";  
  14.   dx = x - obj.offsetLeft;  
  15.   dy = y - obj.offsetTop;  
  16. }  
  17. function Move(e)  
  18.   if (!e) var e = window.event;  
  19.   if (e.pageX) {  
  20.     x = e.pageX;  
  21.     y = e.pageY;  
  22.   } else if (e.clientX) {  
  23.     x = e.clientX;  
  24.     y = e.clientY;  
  25.   } else return;  
  26.   if (obj) {  
  27.     obj.style.left = x - dx;  
  28.     obj.style.top = y - dy;  
  29.   }  
  30. }  
  31. function Drop() {  
  32.   if (!obj) return;  
  33.   obj.style.borderColor="black";  
  34.   obj = false;  
  35. }  
  36. document.onmousemove = Move;  
  37. document.onmouseup = Drop;  
  38. window.onload = Setup;  
‹ Felugró ablakok kezelése Web felkapcsolása a google-re ›
 ■
1

Kiszámolod

Poetro · 2012. Május. 2. (Sze), 22.07
Ki kell számolni a célpont pozícióját (offset). Ez egy elég bonyolult számítás. Lehet hasznosabb, ha használsz valami keretrendszert, ami megoldja neked a drag&drop-ot. Ha megvan az célpont offset-je, akkor ugye a böngésző visszaadja az eseményben annak pozícióját (offsetX / offsetY, pageX / pageY, screenX / screenY, clientX / clientY).
2

Másik megközelítés

Poetro · 2012. Május. 3. (Cs), 12.05
Egy másik megközelítés szerint pedig a document és a célpont mouseup / mousemove eseményét figyeled, és itt megnézed, hogy milyen objektum volt a mouseup / mousemove célpontja. Ekkor az esemény általában több objektumon is végigmegy, ezért vizsgálni kell, hogy mi az esemény eredeti célpontja. Egy kevés kísérletezéssel rá lehet jönni, hogy mi az optimális megoldás. A böngészők eseménykezelésében való különbségeket ekkor természetesen neked kell megoldanod, ezért is érdemes valami keretrendszert használni, ami ezeket a problémákat megoldja helyetted.