抛开兼容性,HTML5 提供的一系列 API 可以简化很多代码量。 最终效果: <ul id=”columns”> <li class=”column” draggable=”true”><header>A</header></li> <li class=”column” draggable=”true”><header>B</header></li> <li class=”column” draggable=”true”><header>C</header></li> <li class=”column” draggable=”true”><header>D</header></li> <li class=”column” draggable=”true”><header>E</header></li> </ul> function addDnDHandlers(elem) { elem.addEventListener(‘dragstart’, handleDragStart, false); //拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上 elem.addEventListener(‘dragenter’, handleDragEnter, false) //当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上 elem.addEventListener(‘dragover’, handleDragOver, false); //拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上 elem.addEventListener(‘dragleave’, handleDragLeave, false); //拖拽元素离开目标元素上移动的时候触发的事件,此事件作用在目标元素上 elem.addEventListener(‘drop’, handleDrop, false); //被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上 elem.addEventListener(‘dragend’, handleDragEnd, false); //当拖拽完成后触发的事件,此事件作用在被拖曳元素上…