html5 - Hvem kan finde ud af drag and drop ? - Udvikleren.dk

Tags: html5

Bruger #13010 @ 11.01.12 20:17

Jeg har i lidt tid prøvet at finde ud af HTML5's drag and drop men jeg syntes godt nok ikke det er så let at bruge som man kunne ønske sig.

Er der nogen af jer der har rodet med det og eventuelt har lavet noget kode jeg må se.

Jeg har kigget på w3.org og andre steder men syntes ikke det er så let.

7 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 10 karma

Sorter efter stemmer Sorter efter dato

Bruger #16678 @ 12.01.12 06:28

281

Du kan tjekke denne tutorialside, video nummer 44, 45 og 46.

Bruger #16977 @ 12.01.12 11:34

Scootergrisen, det er standard javascript, good practice at altid sætte en return value for funktioner, du kan undlade dem hvis du tør

Men grunden til at alle de events der er mulige ved drag and drop er sat og f.eks. ondragover er sat til return false er for at deaktivere browsernes default opførsel hvad drag and drop angår - de har nemlig pr. default noget drag and drop funktionalitet, du kan f.eks. markere tekst og trække ned i den her textarea.

Der er andre ting der også skal tages højde for f.eks. at browseren ikke aktivere et link der trækkes - det tager html5demo eksemplet højde for.

Bruger #16977 @ 11.01.12 20:22

Jeg har ikke selv leget med det endnu, men check den her demo, der er kildekode til: HTML5Demos - Drag and drop

Bruger #13010 @ 11.01.12 21:04

440

Har godt set den side og det ser jo fint ud og virker men der er bare så meget i den kode jeg ikke forstå.
Ville gerne se noget kode hvor kun den nødvendige kode var der og ikke noget med fixes til bestemte browsere. Men hvor standarden fra w3c blev fulgt.

Indlæg senest redigeret d. 11.01.2012 21:05 af Bruger #13010

Bruger #16977 @ 11.01.12 22:01

Ok, jeg har et eksempel fra et HTML5 kursus med Peter Lubbers, som jeg har cuttet ned og ændret lidt:

HTML kode

 <!DOCTYPE html>
 
 <html>
 <head>
 <title>Drag and drop</title>
 <meta charset="utf-8">
 
 <style type="text/css">
 
 #fraContainer div,
 #tilContainer div {
   width: 200px;
   height: 50px;
   border: solid 1px;
   padding: 20px;
   text-align: center;
   color: white;
   background-color: #549981;
 }
 
 #fraContainer div {
   background-color: #99584A;
   cursor: copy;
 }
 
 .highlighted {
     background-color: yellow !important;
 }
 
 .dropped {
   background-color: #05EE17 !important;
 }
 
 
 </style>
 
 <script type="text/javascript">
 
     function dragStart(evt) {
         evt.dataTransfer.setData("text/plain", evt.target.textContent);
         return true;
     }
 
     function dragEnter(evt) {
         evt.target.className="highlighted";
         return false;
     }
 
     function dragLeave(evt) {
         evt.target.className=null;
         return false;
     }
 
     function drop(evt) {
         evt.target.textContent = evt.dataTransfer.getData("text/plain");
         evt.target.className = "dropped";
         return false;
     }
 
 </script>
 
 </head>
 
 <body>
   <div id="fraContainer" ondragstart="return dragStart(event)" ondragend="return false;">
     <div draggable="true">Træk her 1</div>
     <div draggable="true">Træk her 2</div>
     <div draggable="true">Træk her 3</div>
   </div>
 
   <div id="tilContainer">
     <div ondragenter="return dragEnter(event)" ondragleave="return dragLeave(event)" ondragover="return false" ondrop="return drop(event)">Drop her 1</div>
     <div ondragenter="return dragEnter(event)" ondragleave="return dragLeave(event)" ondragover="return false" ondrop="return drop(event)">Drop her 2</div>
     <div ondragenter="return dragEnter(event)" ondragleave="return dragLeave(event)" ondragover="return false" ondrop="return drop(event)">Drop her 3</div>
   </div>
 
 </body>
 </html>

Bruger #13010 @ 11.01.12 23:54

440

Hvad er meningen med alle de her return's i kode ?

ondragstart="return dragStart(event)" ondragend="return false;"

function ...(evt) {
...
return false;
}

Bruger #13010 @ 12.01.12 16:23

440

Tak for video tuts, de hjalp noget.

Angående return false så hvad jeg jeg kan læse på andre sider er det den forkerte måde at gøre det på.
Den "rigtige" måde skulle være preventDefault() eller stopPropagation() for at undgå browserens standardhandling.
Hvad siger i til det ?
Der er noget om det her : http://css-tricks.com/return-false-and-prevent-default/

---

Jeg syntes virkede det er besværligt at bruge HTML 5 drag and drop som det ser ud til at være nu. Ved alle de events og events som skal annulleres.

Jeg er ikke den eneste som syntes det ikke er godt som det er nu : http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html

Håber det bliver lavet bedre og mere simpelt.

Indlæg senest redigeret d. 13.01.2012 01:32 af Bruger #13010

Hvem kan finde ud af drag and drop ?

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler