Hallo,
Op het moment ben ik bezig met een pagina waar mensen een hok kunnen samenstellen, voor bijvoorbeeld bij een bouwplaats.
Het is de bedoeling dat ze van een balk met afbeeldingen de afbeeldingen naar beneden kunnen slepen, waarbij de prijs word opgeteld, en als ze dan meer afbeeldingen erbij zetten komt de prijs dat hoort bij dat "blok" er ook weer bij.
Ik ben niet echt goed in javascript dus het is niet echt een duidelijke code maar hier volgt wat ik heb:
Het probleem is dat wanneer ik van boven naar beneden sleep word de prijs wel opgeteld, maar waneer je onder heen en weer sleep moet de prijs afgetrokken worden als er 1 overschreven word.
Ook heb ik nu de id meegeschreven waardoor de afbeelding boven veranderd ipv de afbeelding onder. De prijs veranderd dan wel goed.
Ik moet dus een manier hebben (functie oid) dat ik bij kan houden welke afbeeldingen ik van boven naar beneden heb geplaatst (word gekopieerd dus kan meerdere dezelfde meesturen).
Nog iets:
De pagina werkt in IE zoals hierboven beschreven, in FireFox is het niet mogelijk om de afbeeldingen te verslepen. Heeft iemand een idee waaraan dat ligt?
Ik hoop dat iemand mij kan helpen?
Met vriendelijke groet,
Op het moment ben ik bezig met een pagina waar mensen een hok kunnen samenstellen, voor bijvoorbeeld bij een bouwplaats.
Het is de bedoeling dat ze van een balk met afbeeldingen de afbeeldingen naar beneden kunnen slepen, waarbij de prijs word opgeteld, en als ze dan meer afbeeldingen erbij zetten komt de prijs dat hoort bij dat "blok" er ook weer bij.
Ik ben niet echt goed in javascript dus het is niet echt een duidelijke code maar hier volgt wat ik heb:
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Drag and Drop images</title>
<style>
.cssNormalText
{
font-family: Arial, Helvetica, sans-serif; font-size: 12px;
}
.topBox
{
width: 100%; padding: 0 25% 0 25%; clear: both;
}
.box
{
margin: 0 15% 0 15%; width: 70%; position: relative; clear: both;
}
.left
{
width: 120px; height: 220px; position: relative; float: left; overflow: hidden; border: 1px solid black; cursor: move; background-color: White; margin: 5px; margin-left: 0;
}
</style>
<script type="text/javascript" language="JavaScript1.2">
var srcElementId; //Id of dragged object
blok0 = 123;
blok1 = 248;
blok2 = 342;
blok3 = 323;
blok4 = 493;
blok5 = 421;
blok6 = 423;
if (document.images) {
var blok = Array();
for (var i = 0; i <= 6; i++) {
blok['img'+i] = Array();
img = i + 1;
blok['img'+i]['src'] = "Images/B" + img + ".png";
}
}
blok['img0']['prijs'] = blok0;
blok['img1']['prijs'] = blok1;
blok['img2']['prijs'] = blok2;
blok['img3']['prijs'] = blok3;
blok['img4']['prijs'] = blok4;
blok['img5']['prijs'] = blok5;
blok['img6']['prijs'] = blok6;
function fnGetSource(id) {
srcElementId = document.getElementById(id).id;
}
function fnGetDestination(thisid, id)
{
str = srcElementId;
str = str.toString();
afbeelding = document.getElementById(srcElementId).innerHTML;
afbeelding2 = document.getElementById(thisid).innerHTML;
if (str.match("s")) {
imgnum = afbeelding.split('"');
nprijs = blok[imgnum[1]]['prijs'];
nprijs = parseInt(nprijs);
prijs = document.getElementById('prasdfs').innerHTML;
prijs = parseInt(prijs);
prijs = nprijs + prijs;
document.getElementById('prasdfs').innerHTML = prijs;
if (afbeelding2.match('id="img')) {
imgnum2 = afbeelding2.split('"');
nprijs = blok[imgnum2[1]]['prijs'];
nprijs = parseInt(nprijs);
prijs = document.getElementById('prasdfs').innerHTML;
prijs = parseInt(prijs);
prijs = prijs - nprijs;
document.getElementById('prasdfs').innerHTML = prijs;
}
} else if (str.match("e")) {
document.getElementById(srcElementId).innerHTML = "Plaats hier";
}
document.getElementById(thisid).innerHTML = afbeelding;
document.getElementById(thisid).id = document.getElementById(srcElementId).id;
afbeelding = "";
srcElementId = "";
}
function cancelevent() {
window.event.returnValue = false;
}
</script>
</head>
<body style="background-color: #E3E3E3;">
<form id="form1" runat="server">
<div class="box">
<div class="left" id="s1" ondragstart='fnGetSource(this.id);' ondragover='cancelevent();'>
<script type="text/javascript" language="JavaScript1.2">document.write('<img id="img0" src="' + blok['img'+0]['src'] + '" />');</script>
</div>
<div class="left" id="s2" ondragstart='fnGetSource(this.id);' ondragover='cancelevent();'>
<script type="text/javascript" language="JavaScript1.2">document.write('<img id="img1" src="' + blok['img'+1]['src'] + '" />');</script>
</div>
<div class="left" id="s3" ondragstart='fnGetSource(this.id);' ondragover='cancelevent();'>
<script type="text/javascript" language="JavaScript1.2">document.write('<img id="img2" src="' + blok['img'+2]['src'] + '" />');</script>
</div>
<div class="left" id="s4" ondragstart='fnGetSource(this.id);' ondragover='cancelevent();'>
<script type="text/javascript" language="JavaScript1.2">document.write('<img id="img3" src="' + blok['img'+3]['src'] + '" />');</script>
</div>
<div class="left" id="s5" ondragstart='fnGetSource(this.id);' ondragover='cancelevent();'>
<script type="text/javascript" language="JavaScript1.2">document.write('<img id="img4" src="' + blok['img'+4]['src'] + '" />');</script>
</div>
<div class="left" id="s6" ondragstart='fnGetSource(this.id);' ondragover='cancelevent();'>
<script type="text/javascript" language="JavaScript1.2">document.write('<img id="img5" src="' + blok['img'+5]['src'] + '" />');</script>
</div>
<div class="left" id="s7" ondragstart='fnGetSource(this.id);' ondragover='cancelevent();'>
<script type="text/javascript" language="JavaScript1.2">document.write('<img id="img6" src="' + blok['img'+6]['src'] + '" />');</script>
</div>
</div>
<div> </div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="box">
<div class="left" id="e1" ondragenter='cancelevent();' ondragstart='fnGetSource(this.id);' ondragover='cancelevent();' ondrop='fnGetDestination(this.id, srcElementId);'>
Plaats hier
</div>
<div class="left" id="e2" ondragstart='fnGetSource(this.id);' ondragenter='cancelevent();' ondragover='cancelevent();' ondrop='fnGetDestination(this.id, srcElementId);'>
Plaats hier
</div>
<div class="left" id="e3" ondragstart='fnGetSource(this.id);' ondragenter='cancelevent();' ondragover='cancelevent();' ondrop='fnGetDestination(this.id, srcElementId);'>
Plaats hier
</div>
<div class="left" id="e4" ondragstart='fnGetSource(this.id);' ondragenter='cancelevent();' ondragover='cancelevent();' ondrop='fnGetDestination(this.id, srcElementId);'>
Plaats hier
</div>
<div class="left" id="e5" ondragstart='fnGetSource(this.id);' ondragenter='cancelevent();' ondragover='cancelevent();' ondrop='fnGetDestination(this.id, srcElementId);'>
Plaats hier
</div>
<div class="left" id="e6" ondragstart='fnGetSource(this.id);' ondragenter='cancelevent();' ondragover='cancelevent();' ondrop='fnGetDestination(this.id, srcElementId);'>
Plaats hier
</div>
<div class="left" id="e7" ondragstart='fnGetSource(this.id);' ondragenter='cancelevent();' ondragover='cancelevent();' ondrop='fnGetDestination(this.id, srcElementId);'>
Plaats hier
</div>
</div>
<div>Prijs: €<span id="prasdfs">0</span></div>
</form>
</body>
</html>Het probleem is dat wanneer ik van boven naar beneden sleep word de prijs wel opgeteld, maar waneer je onder heen en weer sleep moet de prijs afgetrokken worden als er 1 overschreven word.
Ook heb ik nu de id meegeschreven waardoor de afbeelding boven veranderd ipv de afbeelding onder. De prijs veranderd dan wel goed.
Ik moet dus een manier hebben (functie oid) dat ik bij kan houden welke afbeeldingen ik van boven naar beneden heb geplaatst (word gekopieerd dus kan meerdere dezelfde meesturen).
Nog iets:
De pagina werkt in IE zoals hierboven beschreven, in FireFox is het niet mogelijk om de afbeeldingen te verslepen. Heeft iemand een idee waaraan dat ligt?
Ik hoop dat iemand mij kan helpen?
Met vriendelijke groet,
Laatst bewerkt:
