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!

<html>

<head>

<title>Drag and Drop</title>

<link rel="stylesheet" type="text/css" href="dragdrop.css">

<script language="javascript" type="text/javascript"

   src="dragdrop.js">

</script>

</head>

<body>

<div class="drag" id="drag1">

<h3>Döner</h3>

<p><img src="images/doener.png" border="0" width="270px" /></p>

</div>

<div class="box">

<p>Kosár</p>

</div>

<div class="drag" id="drag2">

<h3>Dürüm</h3>

<p><img src="images/dueruem.jpg" border="0" width="270px" /></p>

</div>

</body>

</html>
.drag {
   position: absolute;
   width: 300px;
   border: 2px solid black;
   border-top: 20px solid black;
   top: 100px;
   padding: 5px;
}
#drag1 { left: 20px; }
#drag2 { left: 190px; }
#drag3 { left: 360px; }
#drag4 { left: 530px; }
.box { position: releative; float: left; margin: 0 auto 0 auto; width: 300px; height: 300px; bgcolor: #33333; }
var obj,x,y,dx,dy;
function Setup() {
  if (!document.getElementsByTagName) return;
  divs = document.getElementsByTagName("DIV");
  for (i=0; i<divs.length; i++) {
    if (divs[i].className != "drag") continue;
    divs[i].onmousedown = Drag;
  }
}
function Drag(e) {
  if (!e) var e = window.event;
  obj = (e.target) ? e.target: e.srcElement;
  obj.style.borderColor="red";
  dx = x - obj.offsetLeft;
  dy = y - obj.offsetTop;
}
function Move(e)
  if (!e) var e = window.event;
  if (e.pageX) {
    x = e.pageX;
    y = e.pageY;
  } else if (e.clientX) {
    x = e.clientX;
    y = e.clientY;
  } else return;
  if (obj) {
    obj.style.left = x - dx;
    obj.style.top = y - dy;
  }
}
function Drop() {
  if (!obj) return;
  obj.style.borderColor="black";
  obj = false;
}
document.onmousemove = Move;
document.onmouseup = Drop;
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.