title: Drag and drop divs across page?
body: <p>I'm building a single page which consists of a list (of div's) on the left and a grid (of div's) on the right. I would like to add the ability for a user to click and drag one of the list items and drop it over one of the grid boxes. I'm not using HTML5, but I know it comes with this native capability. I'm trying to avoid HTML 5 at the moment.</p>
  
  <p><img src="https://i.stack.imgur.com/eJqVo.png" alt="enter image description here"></p>
  
  <p>The above illustration shows my basic page layout and the red line shows how things will be dragged/dropped. Any of the list items may be dragged into any of the grid boxes. The grid cells are dynamically sized (resizing the page will resize the grid cells) to where everything always fits in the page at any given time, no scroll bars. Each grid cell has an index starting from 0, counting from left-to-right then top-to-bottom. I need to pair the list item ID (could be any number) with its corresponding grid cell index (0-8 in this case).</p>
  
  <p>I don't know even the first thing I need to do to make this drag/drop possible. I just know the very core basics of HTML - so I need some example to demonstrate this, not just some brief explanation of use this and that, because I won't know what this and that means. All the tutorials I can find are related to either HTML 5 in particular or related to just moving a list item within the same list - but in my case I need to move it outside the list.</p>
  
  <p>Here's the page structure which I am working with below. Note that the list items are dynamically added upon page load...</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
  &lt;head&gt;
      &lt;title&gt;View Cameras&lt;/title&gt;
      &lt;script type="text/javascript" language="javascript"&gt;
          var selIndex = 0;
          var lastListIndex = 0;
  
          function selBox(index) {
              document.getElementById('b' + selIndex).style.backgroundColor = "Black";
              selIndex = index;
              document.getElementById('b' + selIndex).style.backgroundColor = "Blue";
          }
  
          function pageload() {
              AddListItem('rtsp://192.168.1.1', 'Test Item 1');
              AddListItem('rtsp://192.168.1.2', 'Test Item 2');
              AddListItem('rtsp://192.168.1.3', 'Test Item 3');
  
              selBox(0);
              camload('');
              selBox(1);
              camload('');
              selBox(2);
              camload('');
              selBox(3);
              camload('');
              selBox(4);
              camload('');
              selBox(5);
              camload('');
              selBox(6);
              camload('');
              selBox(7);
              camload('');
              selBox(8);
              camload('');
              selBox(0);
          }
  
          function AddListItem(address, caption) {
              lastListIndex += 1;
              var i = lastListIndex;
              var h = '&lt;div id="camlistitem' + i + '" class="camlistitem" onclick="camload(\''+address+'\')"&gt;';
              h += caption;
              h += '&lt;/div&gt;';
              document.getElementById('divCamList').innerHTML += h;
          }
  
          function camload(addr) {
              var h = '';
              if (addr == '') {
                  h = '&lt;div style="width: 100%; height: 100%; text-align: center; vertical-align: middle;"&gt;';
                  h += '  &lt;img src="Cam.jpg" style="width: 100px; height: 80px;" alt="No Camera Selected"';
                  h += '&lt;/div&gt;';
              } else {
                  h = '&lt;OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" ';
                  h += 'id="player'+selIndex+'" events="True" style="width: 100%; height: 100%;"&gt;';
                  h += '&lt;param name="Src" value="' + addr + '" /&gt;';
                  h += '&lt;param name="ShowDisplay" value="True" /&gt;';
                  h += '&lt;param name="AutoLoop" value="False" /&gt;';
                  h += '&lt;param name="AutoPlay" value="True" /&gt;';
                  h += '&lt;embed id="vcl' + selIndex + '"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" ';
                  h += 'autoplay="yes" loop="no" target="' + addr + '" style="width: 100%; height: 100%;"&gt;&lt;/embed&gt;&lt;/OBJECT&gt;';
              }
              document.getElementById('divContent' + selIndex).innerHTML = h;
          }
      &lt;/script&gt;
      &lt;style type="text/css"&gt;
          body 
          {
              height: 100%;
          }
          * { margin: 0px; border: 0px; padding: 0px; }
          h3
          {
              font-size: 14px;
              font-weight: bold;
          }
          div.title
          {
              height: 40px; 
              box-sizing: border-box; 
              overflow: hidden;
          }
          div.main
          {
              height: 100%;
          }
          div.contentmain
          {
              top: 40px;
              bottom: 0;
              left: 250px;
              right: 0;
              overflow: hidden;
              position: absolute;
          }
          div.side
          {
              top: 40px;
              bottom: 0;
              width: 250px;
              position: absolute;
              background: lightgrey;
          }
          .matrix
          {
              display: table;
              width: 100%;
              height: 100%;
          }
          .row 
          {
              display: table-row;
          }
          div.contentbox
          {
              display: table-cell;
              width: 33%;
          }
          table.selecttable
          {
              width: 200px;
              height: 100%;
          }
          td.selecttable
          {
              text-align: center;
              cursor: pointer;
              color: White;
          }
          div.camlist
          {
  
          }
          div.camlistitem
          {
              background-color: Navy;
              color: White;
              cursor: pointer;
              margin-top: 1px;
              padding-left: 5px;
          }
          div.camlistitem:hover
          {
              background-color: Blue;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body onload="pageload()"&gt;
      &lt;div id="divTitle" class="title"&gt;
          &lt;h1&gt;View Cameras&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div id="divMain" class="main"&gt;
          &lt;div class="side"&gt;
              &lt;h3&gt;1) Click box to select view:&lt;/h3&gt;
              &lt;div style="position: relative; float: left; width: 100%;"&gt;
                  &lt;table class="selecttable" border="1px"&gt;
                      &lt;tr&gt;
                          &lt;td class="selecttable" id="b0" onclick="selBox(0);" style="background-color: Black;"&gt;0&lt;br /&gt;&lt;/td&gt;
                          &lt;td class="selecttable" id="b1" onclick="selBox(1);" style="background-color: Black;"&gt;1&lt;br /&gt;&lt;/td&gt;
                          &lt;td class="selecttable" id="b2" onclick="selBox(2);" style="background-color: Black;"&gt;2&lt;br /&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td class="selecttable" id="b3" onclick="selBox(3);" style="background-color: Black;"&gt;3&lt;br /&gt;&lt;/td&gt;
                          &lt;td class="selecttable" id="b4" onclick="selBox(4);" style="background-color: Black;"&gt;4&lt;br /&gt;&lt;/td&gt;
                          &lt;td class="selecttable" id="b5" onclick="selBox(5);" style="background-color: Black;"&gt;5&lt;br /&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td class="selecttable" id="b6" onclick="selBox(6);" style="background-color: Black;"&gt;6&lt;br /&gt;&lt;/td&gt;
                          &lt;td class="selecttable" id="b7" onclick="selBox(7);" style="background-color: Black;"&gt;7&lt;br /&gt;&lt;/td&gt;
                          &lt;td class="selecttable" id="b8" onclick="selBox(8);" style="background-color: Black;"&gt;8&lt;br /&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;h3&gt;2) Select cam to show in selected box:&lt;/h3&gt;
              &lt;div style="position: relative; float: left; width: 100%;"&gt;
                  &lt;div id="divCamList" class="camlist"&gt;
                      &lt;div id="camlistitem0" class="camlistitem" onclick="camload('')"&gt;
                          [No Camera]
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;h3&gt;3) Can't see the cameras? &lt;a href="http://www.videolan.org/vlc/"&gt;Click Here.&lt;/a&gt;&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="contentmain"&gt;
              &lt;div class="matrix"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="contentbox" id="divContent0"&gt;&lt;/div&gt;
                      &lt;div class="contentbox" id="divContent1"&gt;&lt;/div&gt;
                      &lt;div class="contentbox" id="divContent2"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="contentbox" id="divContent3"&gt;&lt;/div&gt;
                      &lt;div class="contentbox" id="divContent4"&gt;&lt;/div&gt;
                      &lt;div class="contentbox" id="divContent5"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="contentbox" id="divContent6"&gt;&lt;/div&gt;
                      &lt;div class="contentbox" id="divContent7"&gt;&lt;/div&gt;
                      &lt;div class="contentbox" id="divContent8"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>PS - there will be a missing picture <code>Cam.jpg</code></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Thanks to the help of <code>roflmao</code>'s effort on the answer below, I got everything working fine now. Just a glitch where when I drag an item, it highlights everything on the page, but that's another story.</p>