dom 拖拽样式_可视化拖拽交互详解

简介

拖拽在可视化中是非常常见的交互，但是想把拖拽交互做好并不容易，既需要对 DOM 的拖拽机制有充分的了解，也需要可视化的绘图引擎提供良好的拖拽支持。我们常见的拖拽交互可以大体上分为三个场景：

• 画布内部的拖拽
• 画布外部元素拖拽到画布内
• 画布内的图形拖拽到画布外

接下来我们会详细的讨论这三个场景，同时讲解绘图引擎（G 4.0）如何实现一套完备的拖拽模型，我们先从 DOM 的拖拽事件开始。

G 是 AntV 几个产品共同的底层 2D 渲染引擎，高效易用，专注于图形的渲染、拾取、事件以及动画机制，给上层 G2、F2、G6 提供统一的渲染机制。

DOM 的拖拽模型

DOM 的拖拽主要包含 7 个事件，参考 MDN drag event ：

• dragstart
• drag
• dragend
• dragenter
• dragover
• dragleave
• drop

这 7 个事件可以分为两组，前 3 个事件 dragstart, drag, dragend 用于触发被的元素，后 4 个用于响应拖拽事件（在上面移动、释放），看下面的示例：

浏览器目前内置了拖拽的效果，首先要在 DOM 上声明 draggable="true" ，通过监听事件设置样式和最终改变 DOM 的容器。

<div class="dropzone">
    <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
        This div is draggable
    </div>
</div>
<div class="dropzon