用Javascript拖放

沃尔特·佐恩（Walter Zorn）的拖放是一种DHTML API，可轻松为页面上的任何元素添加广泛的拖放功能。 该API支持拖动和调整大小，还提供Javascript方法以编程方式移动和调整元素大小。 自从回到Netscape 4以来，它就可以在众多的浏览器上运行，并且具有一些选项，其中包括限制可以操纵项目的区域以及限制调整大小以维持元素的宽高比的初始值。

我以前使用过Aaron Boodman的类似库DOM-Drag来创建用户界面，该界面允许用户通过相对于彼此的拖动来设置项目的顺序。 Aaron最近更新了 DOM-Drag的文档，以包含更多示例。

我更喜欢DOM-Drag的API，而不是拖放的API，因为它使用智能对象方向来提供挂钩，以在发生与拖动有关的事件时执行其他操作。 拖放的API灵活性较差，但该库提供了开箱即用的大小调整支持，并且与较旧的浏览器兼容。 我建议先尝试两种方法，然后再选择一种作为您自己的脚本的起点。

Walter的站点还有其他一些有趣的CSS实验，包括令人印象深刻的图形生成器和用于动态渲染矢量图形的库。

From: https://www.sitepoint.com/drag-and-drop-with-javascript/