Drag&Dropがわからなくなってきた。なので基本にかえるところから。

JavaScript

ここからでも、まだおかしい。

<!DOCTYPE html>
<title>ドラッグ＆ドロップ</title>
<style type="text/css">
  ol {
    border:3px #fee solid;
    height : 200px;
  }
  li {
    margin:3px;
    border:1px #eef solid;
  }
</style>

<body>
<input type="text" id="vv" value="">
<ol>
  <li id="CarMaker0" draggable="true">TOYOTA</li>
  <li id="CarMaker1" draggable="true">HONDA</li>
  <li id="CarMaker2" draggable="true">NISSAN</li>
  <li id="CarMaker3" draggable="true">MATSUDA</li>
  <li id="CarMaker4" draggable="true">SUBALU</li>
</ol>
<ol>

</ol>

<script>

var dragIcon = document.createElement ('img');
dragIcon.src = 'data:image/gif;base64,' +
  'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEiElEQVRYhbWXTWhcVRTHf+fe' +
  'N29mkslMYkxpQQ3YSlxEEQIKBW2QaBdBWteiSMUuXEhUXNqFQiWCrRVRbFcFJeimaVdWECnV' +
  'orRpiW39gkKL1YCNtclkMvPeux8uZiZN2plMzbR/OPDue/fjf/7n3HPvE4CxsTHGx8d7i8Xi' +
  '20CKNUBEsNbqffv2HZmamjo8PT3NzMxMy3EBQBiGeO/HtdYvrWXxOnp6ejh37twO59z2zZs3' +
  'Hz516hSXLl1adYwC8N4jIqG1lnYsSRLWr19PLpebdM5tGx4eZuPGja0JiAjOOUSkLXPO0d3d' +
  'TV9fH7lcbtIYs23r1q0MDAw0JRAsbzjnblHsxnDOkU6nyefzZLNZSqXSZBRF20dHRw93dHRw' +
  '5syZxgo45+phaMuMMQwNDSEiZLNZent7KRQKk4ODg8/u2rWruQIigvce731bCsRxzJYtWxgZ' +
  'GVl6VyM2duzYsUNNCdQVaJdAnUQcxyvehWGYZDKZhv1vqwLNYK1tml8rFLDW3hECWuumzi3V' +
  'gTvlfav5l0JQLyZ3Ai0VaHf/t8Jq4Q2Wd7g9RITAZ7FEeKkuWs+xRljKAedc24ZNYUyZH4I3' +
  'uCo/4a0sffNNfAtuJLBWr1O+i7/195xN7WVm7jj3ZraB13gcTvCSrtB1D+S7QsAjgefP86Z9' +
  'AuJTeAxn0x/ya+VzkuICXrpZtP+woP7AYYlNsSsaPPrgwZ+fSwsK52OFLp//cs9U3BaBwHcy' +
  'p39jSu3hr9kfCVQWJVnwjtP6EwKVqnqLPKZM+hcpqZpeChXaA3Hkdq6JgHiNQvN75gtOF/cT' +
  'RQtolcdaoZ7r86V/YZXaksrqjDH2+nF8q7tA+wzl4AonZS8XZo4TkEVJJ+bmnqs7kQix9Stz' +
  'wJibp1k5ZcgFOcqJ+Y+oLJYIVBdGWnJuCB8rvFVVAvUq2KocWwx5swlX6iR2i+A0ImtjIFqw' +
  'TlYq0LoUWzpZx/OFCb4rHeDk4mdkpYBqIXcjOCVYp67ngDGmZQhqPTHEPJp5gQeCYQ7NvcWi' +
  'mydUjc/7ZlBWiXNSrYTLQ3Ar5ryjYot0Sh87eg4yED7FtbhIbBTGBhgbUEpiislizSpExpOY' +
  'YMmsVTMgK3dBkiT/ywtIiKnwRPZlNgWPc2TuPSo+wuN4Jv8m94UP43GUXfGbb6NPR651XNA1' +
  '0SWV1aZ0zbR/JfN4ynaePt3Pzp79fFX8mOnK11hvcN5gMXSm8vSfG+WdV168KckCoH6HU2vN' +
  'aKjuECuG0cKr3J8eokvfjauVJeuNCjqgt7eXYrG44s4ou3fvpr+/nw0bNryeyWTevx03Iy0B' +
  'zjs81Z+dcrn8wezs7GvpdBqlFEopKpUKFy9eRCYmJkJr7UPW2r50Ov2kiNwF9FA9qgtA9fgC' +
  'ATqBdO25ETwQAwv1Md77KIqiE0opEZGrwBxwBbistT4fWGsLwNNa60eSJFnnvS8AOap/ybll' +
  'k2eo1tdWcfKAqRHxIuK11puABCjVCMwA09bay0GNzbuAFpGMiIQ1L0OgY9mCXS28v1GF+WXt' +
  'hRqpqGZxrc1/WlYKF2lpNSkAAAAASUVORK5CYII='

var noDragIcon = document.createElement ('img');
noDragIcon.src = 'data:image/gif;base64,' +
  'R0lGODlhIAAgAIAAAL8fJP///yH5BAEAAAEALAAAAAAgACAAAAJqjI8Gy5sPT5szRgoQtrrx' +
  '+jFc51zlmIiPiq6n8rbpy8pzBuM2pNY7CftZHD6hBGS80TBMz/HUjLKcAan0qataN9hsMldM' +
  'imLfUvjXIwunalvtLPPBR+G5yUvC3/V5Ptjft4TUsgVIx8VRAAA7';


var ol = document.getElementsByTagName ('ol');
for (var i = 0; i < ol.length; i++) {
  ol[i].addEventListener ('dragover', cancel, false);
  ol[i].addEventListener ('drop', drop, false);
}

function cancel (event) {
  return event.preventDefault();
}

function drop (event) {
  var target = event.target;
  var id;
  var n;
  event.preventDefault();
  id = event.dataTransfer.getData('Text');
  n = document.getElementById (id);
  target.appendChild (n);
}


function dragStart(event) {
  var target = event.target;
  var draggable = (target.getAttribute ('draggable') === 'true');
  
  if (draggable) {
    event.dataTransfer.setData ('Text', target.id);
    event.dataTransfer.setDragImage (dragIcon, -10, -10);
  }
}


function dragEnter (event) {
  var target = event.target;
  var inp = document.getElementById ('vv');
  inp.value = target.nodeName;
}

document.addEventListener ('dragstart', dragStart, false);
document.addEventListener ('dragenter', dragEnter, false);

</script>