Drag and drop probleem

Status
Niet open voor verdere reacties.
D

dafje95

Gebruiker
Lid geworden
5 dec 2008
Berichten
103
Hallo,

Ik ben bezig met een site te bouwen voor een school project en ik heb een probleem :P
Binnen HTML5 kun je gebruik maken van Drag and Drop, maar omdat dit ook met javascript werkt heb ik het maar in deze categorie gezet.

Ik heb gebruik gemaakt van deze tutorial: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_draganddrop
In deze tutorial kan je een plaatje in een box slepen, ik heb alleen meerdere boxen en meerdere plaatjes. Het probleem is nu dat als ik een plaatje in een box sleep, en dan de volgende wil doen, het plaatje uit de eerste box naar die andere box gaat en het tweede plaatje gewoon blijft staan waar hij was voordat ik die in een box probeerde te slepen, maar ik moet juist hebben dat je 4 verschillende plaatjes in 4 verschillende boxen kan plaatsen.

Is dit mogelijk, en zo ja, hoe :P

Mvg Mike
 
Het is zeker mogelijk. Ik heb met een dergelijk systeem een keer een puzzel (alleen getest in Firefox) gemaakt.

Kan je hier eens je code plaatsen? Dan kunnen we kijken waarom het niet werkt zoals je wilt.
 
Hier een stukje van het script, het idee is om een site zoals spele.nl te maken, en dan bovenaan 4 boxen te maken waar je favoriete spelletjes in kan slepen.
Het werkt zover dat je een van de links uit het lijstje kan slepen in een box, maar wanneer je de andere wil doen, verschuift alleen de eerste. Ik ben nog een echte noob in javascript, dus wat uitleg zou me in het leerproces helpen :P

Code: 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Games</title>

<link rel="stylesheet" type="text/css" href="style/style.css" />
<script type="text/javascript">
function dragStart(ev) {
   ev.dataTransfer.effectAllowed='move';
   ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
   ev.dataTransfer.setDragImage(ev.target,0,0);
   return true;
}
function dragEnter(ev) {
   event.preventDefault();
   return true;
}
function dragOver(ev) {
    return false;
}
function dragDrop(ev) {
   var src = ev.dataTransfer.getData("Text");
   ev.target.appendChild(document.getElementById(src));
   ev.stopPropagation();
   return false;
}
</script>

</head>
<body>


<!--Header-->
<div class="Header">
<h1>Games test</h1>
</div>

<!--Omhulsel favo-boxen en player-->
<div class="Top-box">
<!--Favo-box links-->
<div class="Favo-box-shell">
<div class="Favo-box-top"ondragenter="return dragEnter(event)" 
     ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)">
<p>Drop hier</p>
</div>

<div class="Favo-box-bottom"ondragenter="return dragEnter(event)" 
     ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)">
<p>Drop hier</p>
</div>
</div>


<!--Favo-box rechts -->
<div class="Favo-box-shell">
<div class="Favo-box-top" ondragenter="return dragEnter(event)" 
     ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)">
<p>Drop hier</p>
</div>

<div class="Favo-box-bottom" ondragenter="return dragEnter(event)" 
     ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)">
<p>Drop hier</p>
</div>
</div>
</div>

<div class="Games">

<!-- Begin bovenste rij -->
<div class="Games-top">
<h2>Actie</h2>
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
</div>

<div class="Games-top">
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
</div>

<div class="Games-top">
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
<div id="box1" draggable="true" ondragstart="return dragStart(event)"><li>Links Links</li></div>
</div>
<!-- Einde bovenste rij -->
 
Het probleem is dat alle links als id "box1" hebben. Dit mag niet van de HTML specificatie (id's moeten uniek zijn) en veroorzaakt in dit geval ook het probleem. Wat er gebeurt is het volgende:
Als je begint met slepen wordt door de regel [js]ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));[/js] het id van het object dat gesleept wordt opgeslagen. Bij het loslaten van de link op de juiste plaats wordt door de regels [js]var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));[/js] het object met het eerder opgeslagen id toegevoegd aan het object waar de link is losgelaten.

Omdat alle links bij jou als id "box1" hebben kan de browser de links niet van elkaar onderscheiden. In zo'n geval pakt de browser meestal het eerste element met dat id en dat heeft tot gevolg dat, welke link je ook sleept, alleen de eerste link verplaatst. Als je ervoor zorgt dat alle links een unieke id hebben werkt het wel.


Overigens staat in je functie "dragEnter" de regel "event.preventDefault();", dat moet "ev.preventDefault();" zijn.
 
Het werkt nu, maar ik heb dan nog een vraagje:

Zoals het nu is verdwijnt de link uit het lijstje en gaat naar de box, kan je ook iets aanpassen zodat de link zeg maar gekopieerd word, en niet uit het lijstje weg gaat?
 
Dat kan, dan moet je bij het "droppen" een nieuwe div aanmaken i.p.v. de oude div verplaatsen. Als je de functie "dragDrop" zo veranderd krijg je dat effect (uitleg heb ik erbij gezet):
[js]function dragDrop(ev) {
var src = ev.dataTransfer.getData("Text");
var newDiv = document.createElement("div"); // maak een nieuwe div
newDiv.id = "copy" + src; // geef de div als id "copy", geconcateneerd met het id van de oude div (dus copybox1, copybox2, etc.)
newDiv.innerHTML = document.getElementById(src).innerHTML; // plaats de inhoud van de oude div (boxY) in de nieuwe div (copyboxY)
ev.target.appendChild(newDiv); // voeg de nieuwe div toe aan het element waar het "gedropped" wordt.
ev.stopPropagation();
return false;
}[/js]
 
Supersnail zei:
Dat kan, dan moet je bij het "droppen" een nieuwe div aanmaken i.p.v. de oude div verplaatsen. Als je de functie "dragDrop" zo veranderd krijg je dat effect (uitleg heb ik erbij gezet)
Klik om te vergroten...

Kan je deze 4 ook in een cookie zetten, zodat je als je terugkomt op de site je favorieten weer te zien krijgt?
 
Probeer het eens, dan merk je vanzelf of het kan :).

Ik weet niet hoe je de site in gedachten hebt, maar het is zeker mogelijk om zoiets op te slaan in een cookie of, als je PHP (of een soortgelijke taal) gebruikt, in een database.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan