設(shè)置對象可被拖動
被手動對象(比如列表中的某一項li),需要添加屬性draggable="true"，之后晶框，該項即可被拖動，在瀏覽器上也能看到該對象隨鼠標(biāo)移動。
<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>
保存被拖動數(shù)據(jù)
被拖動對象需要添加事件ondragstart皮迟，以保存被拖動對象，經(jīng)測試桑寨，整個節(jié)點對象不能被保存伏尼，只能保存字符串的數(shù)字。比如保存該對象的id尉尾。
<script>
function drag(ev)
{
ev.dataTransfer.setData("text/plain", ev.target.id);
}
</script>
<li id="1" draggable="true" ondragstart="drag(event)">1</li>
設(shè)置可放置的位置
在可被放置對象的事件上添加事件ondragover爆阶，允許放開鼠標(biāo)事件，只有在ondragover處理過，松開鼠標(biāo)左鍵之后辨图，被拖放位置節(jié)點上的ondrop事件才會被觸發(fā)班套，對于列表的例子，可以將每個被拖動對象同時設(shè)置為可放置位置故河。如上例吱韭，列表項<li>2</li>可放置在列表項<li>1</li>里面,注意，最終結(jié)果并不是要放置在1里面鱼的，最終放置的位置還是由響應(yīng)事件ondrop的腳本來控制的理盆。
<li id="1" ondragover="return false">1</li>
<li id="2" draggable="true" ondragstart="drag(event)">2</li>
最終進(jìn)行結(jié)點操作
最終拖放目標(biāo)上響應(yīng)事件ondrop，將被拖動對象插入到拖放目標(biāo)的上面凑阶。
<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>
