Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 drag and copy?

Tags:

html

I've seen some working code for HTML5 drag and drop but has anyone an example of a drag and copy? I want to drag an element onto a drop element but only copy the element to this location.

like image 715
robotwasp Avatar asked Oct 22 '12 08:10

robotwasp


People also ask

Does HTML5 support drag and drop?

Now HTML 5 came up with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up. HTML 5 DnD is supported by all the major browsers like Chrome, Firefox 3.5 and Safari 4 etc.

How do I drag data in HTML5?

getData() method. This method will return any data that was set to the same type in the setData() method. The dragged data is the id of the dragged element ("drag1") Append the dragged element into the drop element.

How do I drag and drop an image in HTML5?

Firstly, you need to mark the element (image in this case) as draggable which you want to drag. Now, you need to specify three attributes that will call the respective events or functions – ondragstart, ondragover, and ondrop. Finally, calling the respective JavaScript function will do the job.


2 Answers

I will stick to the example shown here: http://www.w3schools.com/html/html5_draganddrop.asp

Assuming we have this document:

<!DOCTYPE HTML> <html>  <head>   <script>     <!-- script comes in the text below -->   </script>  </head>  <body>    <div id="div1" ondrop="drop(event)"   ondragover="allowDrop(event)"></div>    <img id="drag1" src="img_logo.gif" draggable="true"   ondragstart="drag(event)" width="336" height="69">   </body> </html> 

Normal Drag & Drop

Normal drag and drop has such functions assigned to the respective elements:

function allowDrop(ev) {   /* The default handling is to not allow dropping elements. */   /* Here we allow it by preventing the default behaviour. */   ev.preventDefault(); }  function drag(ev) {   /* Here is specified what should be dragged. */   /* This data will be dropped at the place where the mouse button is released */   /* Here, we want to drag the element itself, so we set it's ID. */   ev.dataTransfer.setData("text/html", ev.target.id); }  function drop(ev) {   /* The default handling is not to process a drop action and hand it to the next       higher html element in your DOM. */   /* Here, we prevent the default behaviour in order to process the event within       this handler and to stop further propagation of the event. */   ev.preventDefault();   /* In the drag event, we set the *variable* (it is not a variable name but a       format, please check the reference!) "text/html", now we read it out */   var data=ev.dataTransfer.getData("text/html");   /* As we put the ID of the source element into this variable, we can now use       this ID to manipulate the dragged element as we wish. */   /* Let's just move it through the DOM and append it here */   ev.target.appendChild(document.getElementById(data)); } 

Drag & Copy

Whereas you'll have to alter the drop function so that it copies the DOM element instead of moving it.

/* other functions stay the same */  function drop(ev) {   ev.preventDefault();   var data=ev.dataTransfer.getData("text/html");   /* If you use DOM manipulation functions, their default behaviour it not to       copy but to alter and move elements. By appending a ".cloneNode(true)",       you will not move the original element, but create a copy. */   var nodeCopy = document.getElementById(data).cloneNode(true);   nodeCopy.id = "newId"; /* We cannot use the same ID */   ev.target.appendChild(nodeCopy); } 

Try this page: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
And then append a .cloneNode(true) to getElementById(data).

Switch between Copy & Paste

You could even do things like in file managers: Ctrl-Key switches from moving to copying:

function drop(ev) {   ev.preventDefault();   var data=ev.dataTransfer.getData("text/html");   /* Within a Mouse event you can even check the status of some Keyboard-Buttons      such as CTRL, ALT, SHIFT. */   if (ev.ctrlKey)   {     var nodeCopy = document.getElementById(data).cloneNode(true);     nodeCopy.id = "newId"; /* We cannot use the same ID */     ev.target.appendChild(nodeCopy);   }   else     ev.target.appendChild(document.getElementById(data)); } 
like image 108
Nippey Avatar answered Sep 30 '22 13:09

Nippey


If you wanted an example using JQuery I have provided this jsFiddle. Essentially you just need to bind to the drop, dragover and dropstart events for the DOM objects. You can then use JQuery's build in clone() method to duplicate the element.

JQuery also returns it's own events wrapper so you must get the originalevent from the JQuery event

$('#x').bind('dragstart', function(e) {     e.originalEvent.dataTransfer.effectAllowed = 'copy';     e.originalEvent.dataTransfer.setData('Text', '#x'); });  $('#drop-box').bind('drop', function(e) {     e.preventDefault();     e.stopPropagation();      $(this).html($(e.originalEvent.dataTransfer.getData('Text')).clone());      return false; }).bind('dragover', false); 
like image 31
BeRecursive Avatar answered Sep 30 '22 14:09

BeRecursive