JavaScript是一種廣泛使用的編程語言，它在Web開發(fā)中扮演著非常重要的角色。而拖拽li則是其中一個比較實用的應(yīng)用場景。假設(shè)我們有一個ul列表，現(xiàn)在我們要實現(xiàn)可以拖拽的li元素，使得我們可以隨意拖動它們的位置，甚至可以將它們拖拽到別的容器中，這就是我們要討論的主題。
在使用JavaScript實現(xiàn)拖拽功能時，我們需要用到drag和drop事件。其中drag事件是元素被拖動時觸發(fā)的事件，而drop事件是元素被拖放完成時觸發(fā)的事件。在下面的代碼中，我們?yōu)槊總€li元素都綁定了dragstart、dragover、dragleave和drop事件。

<ul>
<li draggable="true" ondragstart="dragStart(event)">item 1</li>
<li draggable="true" ondragstart="dragStart(event)">item 2</li>
<li draggable="true" ondragstart="dragStart(event)">item 3</li>
</ul>
<br>
<script>
function dragStart(event) {
event.dataTransfer.setData("text/plain", event.target.id);
}
<br>
  function dragOver(event) {
event.preventDefault();
event.dataTransfer.dropEffect = "move";
event.target.classList.add("hover");
}
<br>
  function dragLeave(event) {
event.target.classList.remove("hover");
}
<br>
  function drop(event) {
event.preventDefault();
event.target.classList.remove("hover");
var data = event.dataTransfer.getData("text/plain");
event.target.parentNode.insertBefore(document.getElementById(data), event.target);
}
<br>
  var listItems = document.querySelectorAll("li");
[].forEach.call(listItems, function(item) {
item.addEventListener("dragover", dragOver, false);
item.addEventListener("dragleave", dragLeave, false);
item.addEventListener("drop", drop, false);
});
</script>

在上面的代碼中，我們分別定義了dragStart、dragOver和dragLeave這三個函數(shù)，它們分別對應(yīng)著drag事件、dragover事件和dragleave事件。
當(dāng)元素首次被拖動時，dragStart函數(shù)會被調(diào)用。在這個函數(shù)中，我們使用了event.dataTransfer.setData方法將被拖動的元素的id保存在數(shù)據(jù)傳輸對象中。
當(dāng)鼠標(biāo)在元素上方移動時，dragOver函數(shù)會被調(diào)用。在這個函數(shù)中，我們使用了event.preventDefault()方法來阻止瀏覽器默認(rèn)的動作（例如將拖動的元素替換為“禁止”符號），并設(shè)置了event.dataTransfer.dropEffect屬性為“move”，以指示該元素可以被拖動。
當(dāng)鼠標(biāo)離開元素時，dragLeave函數(shù)會被調(diào)用。在這個函數(shù)中，我們使用了classList.remove方法將li元素的“hover”類移除，以表明該元素不再是拖放目標(biāo)。
在元素被釋放時，drop函數(shù)會被調(diào)用。在這個函數(shù)中，我們使用了event.preventDefault()方法來阻止瀏覽器默認(rèn)的動作，并使用了event.dataTransfer.getData方法從數(shù)據(jù)傳輸對象中獲取被拖動元素的id值。最后，我們使用了parentNode.insertBefore方法將被拖動的元素插入到目標(biāo)元素之前。
以上就是實現(xiàn)拖拽li的JavaScript代碼，我們可以通過這種方式來實現(xiàn)拖放排序的功能，并且可以將這些元素拖動到其他容器中。
JavaScript在Web開發(fā)中的作用非常重要，它可以通過各種方式為我們提供更加豐富和靈活的應(yīng)用體驗。拖拽li功能就是其中一個實現(xiàn)方式，可以讓我們方便地進(jìn)行元素排序并移動。希望這篇文章能夠給你帶來一些啟示，讓你實現(xiàn)更加豐富和靈活的Web應(yīng)用。