成果展示：

codepen链接：https://codepen.io/ashipiling/pen/dyvZgxG 该网站实现了demo，可进行拖拽尝试和代码修改。
1drag.gif
图1 左侧元素拖拽入右侧画板的演示。

拟解决需求：

1）点击左侧元素并移动，呈现出被移动的效果；
2）鼠标释放时，右侧页面在相应位置绘制元素（与左侧长相不一致，为重新绘制）；
3）左侧元素不消失。

实现思路：
a）使用原生draggable属性
b）文档监听dragstart和drop动作；
c）dragstart，按下draggable元素时触发，可自定义保存当前元素的className和Id；
1) 元素的id假设为component_layer_graphconv，通过e.transferdata或者全局变量保存，在drop的时候重新读取该id
2）
d）drop，拖拽结束鼠标释放时触发，根据保存的id信息绘制对应物体；
1）获取鼠标释放时的绝对位置，转换为右侧页面的相对位置；
2）获取保存的id信息，绘制对应元素图案；
3）元素position：absolute，通过left和top进行摆放。
e）dragend，拖拽流程结束后，清理所保存的全局变量。

实现细节：**
javascript代码
var g_left_sidebar_width = 200;
var g_top_bar_height = 0;
(function() {
document.addEventListener(‘dragstart’, function(e) { //增加dragstart监听，入参的e代表页面event事件，e.target代表当前元素（鼠标点击的最上方元素）
e.dataTransfer.setData(‘id’, e.target.id); //保存id信息成一个字典
}, false);

  1. document.addEventListener('dragover', function(e) {                 //增加移动过程监听，阻止浏览器原本行为，这句话不能删除<br />                e.preventDefault();<br />    }, false);
  3. document.addEventListener('drop', function(e) {                                                             _//增加drop监听_<br />            var  posX = e.pageX;<br />            var  posY = e.pageY;<br />            e.preventDefault();                                                                                                  //阻止浏览器原本行为<br />            if (e.target.id === "draw_canvas" || e.target.nodeName === "CANVAS") {            //确保鼠标位于画板内部释放<br />                var relative_x = posX - g_left_sidebar_width;                                                      //计算当前相对位置<br />                var relative_y = posY - g_top_bar_height;<br />                draw_component(relative_x, relative_y);                                                             //调用绘制函数<br />            } else {<br />                alert("请移动到画板！");<br />           }<br />    }, false);
  5. document.addEventListener('dragend', function(e) {<br />    }, false);

})();

function drawcomponent( posX, posY) {
var parent = document.getElementById(“draw_canvas”); //获取画板
var div = document.createElement(“div”);
div.className = “canvas_component “; //canvascomponent 规定了元素的基本颜色和形状
div.id = “componentid”;
var positionX = posX - 200 / 2; //此处200代表元素宽度，建议使用全局dict保存
var positionY = posY - 200 / 2; //此处200代表元素高度
var csstext = “width: “ + 200+ “px;” + “height: “ + 200+ “px;” + “left: “ + positionX + “px;” + “top: “ + positionY + “px;”;
div.style.cssText = csstext;
parent.append(div); //将绘制的div挂入画板中_
}