成果展示：
    codepen链接：https://codepen.io/ashipiling/pen/BaWmedL 该网站实现了demo，可进行拖拽尝试和代码修改。
    3move.gif
    图1 画板自由拖拽示例。


    拟解决问题：**
    a) 当元素超出画板显示面积后，使用滚动条查看非常的不顺手。采用画板拖拽方式来解决问题；
    b) 画板拖拽与画板内部元素拖拽不冲突，优先级低于元素拖拽；

    实现思路：
    a） dom元素内置有ScrollTo(x, y)函数，计算出鼠标拖拽偏移，传入函数进行移动；
    b） 采用两个全局变量记录鼠标点击到的是元素还是画板；
    c） onmousedown，与画板绑定；
    判断e.currentTarget的className和id是否是想要被移动的画板;
    记录鼠标点击下的位置；
    记录全局变量为画板拖动;
    d) onmousemove，鼠标在绑定的元素内移动时高频触发；
    判断全局变量是否是画板，如果是则进行下一步；
    获取鼠标当前的位置，与之前保存的位置计算偏移；
    将偏移传入ScrollTo函数。
    e) onmouseup，鼠标在绑定的元素内释放时触发一次。
    清理全局变量等。

    实现细节：**
    javascript代码
    var gmover_mouse_down_flag = “up”; //全局变量记录点击下的是否是画板
    var g_mover_x_old = 0;
    var g_mover_y_old = 0;
    var g_left_sidebar_width = 0;     //当前页面没有sidebar
    var g_top_bar_height = 0;
    function mover_mouse_down(e) {
    var id = e.target.id;
    if (id === “draw_canvas”) {     //判读当前点击的是否是画板
    g_mover_mouse_down_flag = “down”;
    g_mover_x_old = e.pageX - g_left_sidebar_width;
    g_mover_y_old = e.pageY - g_top_bar_height;
    }
    }
    //绑定canvas的mousemove函数，用于移动comp和拖拽画布
    function mover_mouse_move(e) {
    e.preventDefault();
    var relativeX = e.pageX - g_left_sidebar_width;
    var relativeY = e.pageY - g_top_bar_height;
    if (g_mover_mouse_down_flag === “down”) {
    var move_x = relativeX - g_mover_x_old;     //计算偏移
    var move_y = relativeY - g_mover_y_old;
    g_mover_x_old = relativeX;     //更新老数据
    g_mover_y_old = relativeY;
    move_draw_canvas(move_x, move_y);
    }
    }
    function mover_mouse_up(e) {     //清理全局变量
    if (g_mover_mouse_down_flag === “down”) {
    g_mover_mouse_down_flag = “up”;
    g_mover_x_old = 0;
    g_mover_y_old = 0;
    }
    }
    function move_draw_canvas(move_x, move_y) {     //移动画板的函数
    var draw_canvas = document.getElementById(“draw_canvas”);
    var now_left = draw_canvas.scrollLeft;     //当前画板的滚动定位
    var now_top = draw_canvas.scrollTop;
    draw_canvas.scrollTo(now_left - move_x, now_top - move_y);     //更新位置为当前位置加上鼠标偏移_
    }