此篇文章介绍在网页前端使用 SortableJS 快速实现拖拽相关功能，并解决一些问题和避坑。
“SortableJS 是功能强大的 JavaScript 拖拽库”，这是其自评的，上图展示的效果就是实际应用的场景，通过使用 SortableJS，我们可以方便快捷地实现 WEB 前端的拖动功能，原网址：www.sortablejs.com
<div id="div_sortable_box">
<span class="SPAN_sortable">01</span>
<span class="SPAN_sortable">02</span>
<span class="SPAN_sortable">03</span>
<span class="SPAN_sortable">04</span>
<span class="SPAN_sortable">05</span>
<span class="SPAN_sortable">06</span>
<span class="SPAN_sortable">07</span>
<span class="SPAN_sortable">08</span>
<span class="SPAN_sortable">09</span>
<span class="SPAN_sortable">10</span>
</div>
<script>
new Sortable(document.getElementById("div_sortable_box"), {
draggable: ".SPAN_sortable",
animation: 150,
chosenClass: "sortable-chosen"
})
</script>
上面就是全部的标记代码和脚本代码，除开了样式代码，因为下面会介绍关于样式代码使用不当可能造成的问题和避坑。比如拖动后边距消失，紧贴在一起的问题：
