Monday 5 December 2016

Drag and Drop HTML 5 with Orignal or with copy

JAVASCRIPT FUNCTIONS :
 
 
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  //ev.dataTransfer.setData("text", ev.target.id);  DI.trip_id = $(this).attr('trip_id');
  DI.drag_id = ev.target.id;
}


//Drop with originalfunction drop_original(ev) {
  ev.preventDefault();
  var data_id = DI.drag_id;
  var elm_id = ev.target.id;
  ev.target.appendChild(document.getElementById(DI.drag_id));
  //$("#"+elm_id).find('.time-slot-detail').append(document.getElementById(data));}
 
 
 
//Drop with copyfunction drop_copy(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(DI.drag_id).cloneNode(true);
  nodeCopy.id = "newId"; /* We cannot use the same ID */  ev.target.appendChild(nodeCopy);
} 
 
http://stackoverflow.com/questions/13007582/html5-drag-and-copy 
 



HTML==================>



 



 



<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop_copy(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body> 
















Posted by



at







































No comments:















Post a Comment


















        

      









Subscribe to:
Post Comments (Atom)