[Løst] Drag and Drop

saproe · 23. mai 2012

Er det noen som ser noe feil med denne koden her?

index.html

<!doctype html>
<html lang="en">
<head>
 <title>Canvas Coding</title>
 <link rel="stylesheet" href="main.css">
 <script src="javascript.js"></script>
</head>
<body>

 <section id="leftbox">
  Drag something in me!
 </section>


 <section id="rightbox">
  <img id="icon" src="icon.png">
 </section>

</body>
</body>
</html>

main.css

#leftbox{
float: left;
width: 250px;
height: 250px;
margin: 5px;
border: 3px solid blue;
}
#rightbox{
float: left;
width: 250px;
height: 250px;
margin: 5px;
border: 3px solid green;
}

javascript.js

function doFirst(){
mypic = document.getElementById('icon');
mypic.addEventListener("dragstart", startDrag, false);
leftbox = document.getElementById('leftbox');
leftbox.addEventListener("dragenter", function(e){e.preventDefault}, false );
leftbox.addEventListener("dragover", function(e){e.preventDefault}, false );
leftbox.addEventListener("drop", dropped, false);
}
function startDrag(e){
var code = '&--#60;img src="icon.png"&--#62;';
e.dataTransfer.setData('Text', code);
}
function dropped(e){
e.preventDefault();
leftbox.innerHTML = e.dataTransfer.getData('Text');
}
window.addEventListener("load", doFirst, false);

Det er meninga at icon.png skal kunne dras over fra den høyre boksen over til den andre, men jeg får det ikke til å funke

Endret 23. mai 2012 av saproe

agm · 23. mai 2012

Rett e.preventDefault til e.preventDefault(); så blir det andre boller

Tillot meg å endre litt på koden din:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas Coding</title>
<style>
#leftbox {
 float: left;
 width: 250px;
 height: 250px;
 margin: 5px;
 border: 3px solid blue;
}
#rightbox {
 float: left;
 width: 250px;
 height: 250px;
 margin: 5px;
 border: 3px solid green;
}
</style>
<script>

function doFirst() {

 mypic = document.getElementById('icon');

 mypic.ondragstart = function(e) {
  var code = '<img src="http://www.google.com/doodle4google/2008/images/regional_doodles_tn/CA-95070-47cbd909-2.jpg" />';
  e.dataTransfer.setData('Text', code);
  console.log("Start drag");
 };

 leftbox = document.getElementById('leftbox');

 leftbox.ondragenter = function(e) {
  e.preventDefault();
  console.log("Dragenter");
 };

 leftbox.ondragover = function(e) {
  e.preventDefault();
  console.log("Dragover");
 };

 leftbox.ondrop = function(e) {
  e.preventDefault();
  leftbox.innerHTML = e.dataTransfer.getData('Text');
  console.log("Dropped");
 };
}

window.onload = doFirst;
</script>
</head>
<body>
 <section id="leftbox">
  Drag something in me!
 </section>


 <section id="rightbox">
  <img id="icon" src="http://www.google.com/doodle4google/2008/images/regional_doodles_tn/CA-95070-47cbd909-2.jpg">
 </section>

</body>
</body>
</html>

Endret 23. mai 2012 av agm

saproe · 23. mai 2012

Tusen takk for hjelpen! :dribble:

Logg inn

[Løst] Drag and Drop

Anbefalte innlegg

saproe

Lenke til kommentar

Videoannonse

agm

Lenke til kommentar

saproe

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Russlands invasjon av Ukraina [Ny tråd, les førstepost] 1 2 3 4 3091

Hvem er aktive 0 medlemmer