网页软件 拖拽 第1篇
例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。
介绍两个属性：
：获取当前选定的拖放操作类型或者设置的为一个新的类型。值必须为 none, copy, link 或 move。
：提供所有可用的操作类型。必须是 none, copy, copyLink, copyMove, link, linkMove, move, all or uninitialized 之一。
通过这个接口，我们可以控制拖拽元素的显示，和操作类型。
例如：当effectAllowed设置为move时，拖拽元素是不会出现+号。
主要介绍四个事件，一个拖拽元素操作过程会分别触发
网页软件 拖拽 第2篇
最后总结一下，主要介绍了 HTML 拖拽接口（Drag and Drop API）的基本概念，包括 DataTransfer 接口和常用的拖拽事件。
详细介绍了如何在静态页面中实现一个课程表的拖拽功能。首先，通过设置元素的 draggable 属性为 true，使元素可拖拽。然后，通过监听拖拽事件，在事件处理函数中实现拖拽过程中的逻辑，包括拖拽元素的显示效果、拖拽元素的移动和放置。
记录一下，如有错误，请指正O^O!
网页软件 拖拽 第3篇
左侧课程，右侧表格
要想完成拖拽就需要给左侧的元素添加draggable为true的属性，即可完成拖拽。开始定义拖拽事件：
通过进行控制。如何进行控制，就需要在拖拽元素上添加自定义data-effect属性为copy,在开始的事件中进行定义，后面拖拽完成只需要修改为move即可。
可以通过自定义属性data-drop定义为copy，说明该元素允许接受copy,即可添加背景色，例如添加类drop-over,添加之前需要先清除。例如左侧只接受data-drop为move,不需要每个元素添加自定义属性，只需要在父元素添加一个即可，所以查找元素时，只要自身或者父元素满足条件即可。
到达目标元素，需要清除样式，获取拖拽元素，
至此，所有的逻辑就完成了。
完整代码：