Avatar billede flol Nybegynder
29. januar 2013 - 17:30 Der er 7 kommentarer og
1 løsning

Hvordan fanger jeg id'et

Hej,

Jeg arbejder lidt med at få denne Drag and Drop funktion, til at virke efter mine behov, men hvordan fanger jeg id'et på den "<a> -tag" jeg smider med?

( Det er lidt nyt for mig der her, så i må meget gerne komme med en forklaring også ;) )

#########################

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>HTML5 Demo: Drag and drop</title>
<link rel="stylesheet" href="css/html5demos.css">
<script src="http://html5demos.com/js/h5utils.js"></script></head>
<body>
<section id="wrapper">
    <header>
      <h1>Drag and drop</h1>
    </header>

<style type="text/css">
li {
  list-style: none;
}

li a {
  text-decoration: none;
  color: #000;
  margin: 10px;
  width: 150px;
  border: 3px dashed #999;
  background: #eee;
  padding: 10px;
  display: block;
}

*[draggable=true] {
  -moz-user-select:none;
  -khtml-user-drag: element;
  cursor: move;
}

*:-khtml-drag {
  background-color: rgba(238,238,238, 0.5);
}

li a:hover:after {
  content: ' (drag me)';
}

ul {
  margin-left: 200px;
  min-height: 300px;
}

li.over {
  border-color: #333;
  background: #ccc;
}

#bin {
  background: url('http://html5demos.com/images/bin.jpg') top right no-repeat;
  height: 250px;
  width: 166px;
  float: left;
  border: 5px solid #000;
  position: relative;
  margin-top: 0;
}

#bin.over {
  background: url('http://html5demos.com/images/bin.jpg') top left no-repeat;
}

#bin p {
  font-weight: bold;
  text-align: center;
  position: absolute;
  bottom: 20px;
  width: 166px;
  font-size: 32px;
  color: #fff;
  text-shadow: #000 2px 2px 2px;
}
</style>
<article>
  <p>Drag the list items over the dustbin, and drop them to have the bin eat the item</p>
  <div id="bin"></div>
  <ul>
    <li><a id="8" href="#">one</a></li>
    <li><a href="#" id="10">two</a></li>
    <li><a href="#" id="three">three</a></li>
    <li><a href="#" id="four">four</a></li>
    <li><a href="#" id="five">five</a></li>
  </ul>
</article>
  <script>

  var eat = ['yum!', 'gulp', 'burp!', 'nom'];
  var yum = document.createElement('p');
  var msie = /*@cc_on!@*/0;
  yum.style.opacity = 1;

  var links = document.querySelectorAll('li > a'), el = null;
  for (var i = 0; i < links.length; i++) {
    el = links[i];
 
    el.setAttribute('draggable', 'true');
 
    addEvent(el, 'dragstart', function (e) {
      e.dataTransfer.effectAllowed = 'copy'; // only dropEffect='copy' will be dropable
      e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
    });
  }

  var bin = document.querySelector('#bin');

  addEvent(bin, 'dragover', function (e) {
    if (e.preventDefault) e.preventDefault(); // allows us to drop
    this.className = 'over';
    e.dataTransfer.dropEffect = 'copy';
    return false;
  });

  // to get IE to work
  addEvent(bin, 'dragenter', function (e) {
    this.className = 'over';
    return false;
  });

  addEvent(bin, 'dragleave', function () {
    this.className = '';
  });

  addEvent(bin, 'drop', function (e) {
    if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???

    var el = document.getElementById(e.dataTransfer.getData('Text'));
   
    el.parentNode.removeChild(el);

    // stupid nom text + fade effect
    bin.className = '';
    yum.innerHTML = eat[parseInt(Math.random() * eat.length)];

    var y = yum.cloneNode(true);
    bin.appendChild(y);

    setTimeout(function () {
      var t = setInterval(function () {
        if (y.style.opacity <= 0) {
          if (msie) { // don't bother with the animation
            y.style.display = 'none';
          }
          clearInterval(t);
        } else {
          y.style.opacity -= 0.1;
        }
      }, 50);
    }, 250);
   
    // AJAX START
            var str = e.dataTransfer.setData('Text', this.id);
           
            if (str=="")
              {
              document.getElementById("txtHint").innerHTML="";
              return;
              }
            if (window.XMLHttpRequest)
              {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
              }
            else
              {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
            xmlhttp.onreadystatechange=function()
              {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                }
              }
            xmlhttp.open("GET","favorit.php?q="+str,true);
            xmlhttp.send();
           
    // AJAX SLUT

    return false;
  });

  </script>
  <div id='txtHint'>
  Favorit:
  </div>
</body>
</html>

######################
Avatar billede olebole Juniormester
29. januar 2013 - 17:49 #1
<ole>

Du bør nok først afslutte dine åbne tråde  =)

/mvh
</bole>
Avatar billede flol Nybegynder
29. januar 2013 - 18:07 #2
Ja du har ret :)

Bruger ikke denne side så meget mere, så er for grim til at smutte når jeg har fået et svar.

Men nu har jeg været ved at kigge min gamle tråd og er ved at få dem afsluttet. :)
Avatar billede flol Nybegynder
30. januar 2013 - 08:12 #3
olebole -> Du kunne ikke hjælpe med denne?
Avatar billede olebole Juniormester
30. januar 2013 - 22:34 #4
Det har jeg ingen idé om. Jeg aner ikke, hvad meningen er med scriptet - og jeg kan ikke få det til at give mening. Prøv at lægge et link til siden  =)
Avatar billede flol Nybegynder
31. januar 2013 - 08:26 #5
Du kan se det i funktionen her, det er en drag and drop funktion i HTML5 og java script:

http://flol.dk/bilsaelgeren/test.php

Og så vil jeg "bare" fange id'et på de elementer man "trækker" med. :)
Avatar billede chriz7913 Nybegynder
03. februar 2013 - 23:06 #6
Synes ikke at koden på din side og koden du har lagt herind ser helt ens ud, men hvis vi kigger på den kode der ligger på siden du har linket til, er svaret lige til.

Lige efter der står
// AJAX START


udskifter du bare

var str = "THE DRAG ID HERE";


med

var str = el.id;


Så får du ID'et på det element du lige har 'droppet'
Avatar billede flol Nybegynder
04. februar 2013 - 12:28 #7
Tak.. :)

Det var dejligt, så kan jeg komme videre.

Du kan bare lægge et svar, så overføre jeg point til dig.
Avatar billede chriz7913 Nybegynder
04. februar 2013 - 18:01 #8
Så lidt :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester