E Online Support - Free Software Download
How to drag and drop any element in html5?
Plz tell me how to drag and drop element in html.
Shruti
Answer
1

Drag and drop doesn't move elements around, if you want the element to move when you drop it then you have to set the new position of the element in the drop event.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Fri, 27 Jun 2014 21:02:23 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>

    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
    li
    { 
      position:  absolute;
      left: 0;
      top: 0; /* set these so Chrome doesn't return 'auto' from getComputedStyle */
      width: 200px; 
      background: rgba(255,255,255,0.66); 
      border: 2px  solid rgba(0,0,0,0.5); 
      border-radius: 4px; padding: 8px;
    }
    </style>
    <script>

    function drag_start(event) 
    {
    var style = window.getComputedStyle(event.target, null);
    var str = (parseInt(style.getPropertyValue("left")) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top")) - event.clientY)+ ',' + event.target.id;
    event.dataTransfer.setData("Text",str);
    } 

    function drop(event) 
    {
    var offset = event.dataTransfer.getData("Text").split(',');
    var dm = document.getElementById(offset[2]);
    dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
    dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
    event.preventDefault();
    return false;
    }

    function drag_over(event)
    {
    event.preventDefault();
    return false;
    }   
    </script>
  </head>
  <body ondragover="drag_over(event)" ondrop="drop(event)">
   <ul>
          <li id="txt1" draggable="true" ondragstart="drag_start(event)"> Drag this text </li><br>
          <li id="txt2" draggable="true" ondragstart="drag_start(event)"> Drag me</li>
  </ul>
       <p>I never am really satisfied that I understand anything; because, understand it well as I may, my comprehension can only be an infinitesimal fraction of all I want to understand about the many connections and relations which occur to me, how the matter in question was first thought of or arrived at, etc., etc.</p>
       
        
  </body>
Question*:
Description*:
Script:
Related To:
 PHP    HTML    CSS    JAVASCRIPT    JQUERY   
 AJAX    WINDOWS    GAMES    DRIVERS    MAC   
 LINUX    MOBILE    GADGETS   
Security Code:
8522
Enter Security Code:
 
Facebook   Linkedin   Skype   Twitter