设置对象可被拖动
被手动对象(比如列表中的某一项li),需要添加属性draggable="true"，之后，该项即可被拖动，在浏览器上也能看到该对象随鼠标移动。
<ul>
<li draggable="true">1</li>
<li draggable="true">2</li>
<li draggable="true">3</li>
<li draggable="true">4</li>
<li draggable="true">5</li>
</ul>
保存被拖动数据
被拖动对象需要添加事件ondragstart，以保存被拖动对象，经测试，整个节点对象不能被保存，只能保存字符串的数字。比如保存该对象的id。
<script>
function drag(ev)
{
ev.dataTransfer.setData("text/plain", ev.target.id);
}
</script>
<li id="1" draggable="true" ondragstart="drag(event)">1</li>
设置可放置的位置
在可被放置对象的事件上添加事件ondragover，允许放开鼠标事件，只有在ondragover处理过，松开鼠标左键之后，被拖放位置节点上的ondrop事件才会被触发，对于列表的例子，可以将每个被拖动对象同时设置为可放置位置。如上例，列表项<li>2</li>可放置在列表项<li>1</li>里面,注意，最终结果并不是要放置在1里面，最终放置的位置还是由响应事件ondrop的脚本来控制的。
<li id="1" ondragover="return false">1</li>
<li id="2" draggable="true" ondragstart="drag(event)">2</li>
最终进行结点操作
最终拖放目标上响应事件ondrop，将被拖动对象插入到拖放目标的上面。
<script>
function drop(ev)
{
ev.preventDefault();
const ul = document.querySelector('ul') as HTMLUListElement;
const id = ev.dataTransfer.getData("text/plain");
ul.insertBefore(document.getElementById(id), ev.target);
}
</script>
<li id="1" ondrop="drop(event)" ondragover="return false">1</li>
<li id="2" draggable="true" ondragstart="drag(event)">2</li>
