页面分为菜单和画布两个部分，其中菜单部分为拖拽元素，画布部分为放置元素。
整个操作也分为两个部分，首先从侧边栏拖拽到画布中央，放置在画布上后，再次点击画布中的元素可对其进行拖拽移动。

第一步：从侧边拖拽到画布上

引入 vuedraggable 和 SortableJS

<div class="main">
    <draggable group="components" draggable=".draggable" @add="onAdd"></draggable>
//  draggable 指定元素内的哪些项目应可拖动
//  sort 列表内排序
//  group 要将元素从一个列表拖到另一个列表中，两个列表必须具有相同的组名
<div class="aside">
    <draggable class="draggable-tab" draggable=".panel-item"
           group="components" :sort="false" @end="onEnd">
</draggable>
import draggable from 'vuedraggable'
export default {
  methods: {
    onAdd (evt) { // 元素从另一个列表拖放到列表中
       console.log(evt)
    onEnd (evt) { // 元素拖动结束
      if (evt.pullMode) {
         console.log(evt)
第二步：拖拽移动画布中的元素位置
被移动元素需设置为绝对定位，其父元素设置为相对定位
<div class="aside">侧边菜单栏</div>
<div class="container">
    <div class="panel-item" id="panel">
        <div class="move" @mousedown="mousedown"></div>
<style>
.container {
    position: relative;
.panel-item {
    position: absolute;
</style>
import $ from 'jquery'
export default {
  methods: {
    mousedown (evt) {
      $('#panel').css('z-index', ++this.zIndex)
      const offsetX = evt.offsetX
      // 限制拖拽范围，不超过当前可视窗口
      const drag = (evt) => {
        let xScale
        if (this.position === 'right') {
          xScale = evt.x < (document.body.clientWidth - $('.aside').width() - 10) &&
            evt.x > 10
        } else {
          xScale = evt.x < (document.body.clientWidth - 50) &&
            evt.x > $('.aside').width()
        if (xScale) {
          if (this.position === 'right') {
            const left = (evt.x - offsetX)
            $('#panel').css('left', left)
          } else {
            if ($('.aside').width() > 0) {
              $('#panel').css('left', evt.x - offsetX - 180)
            } else {
              $('#panel').css('left', evt.x - 120)
        const yScale = evt.y > 10 && evt.y < (document.body.clientHeight - 10)
        if (yScale) {
          $('#panel').css('top', evt.y - 5)
      this.onDrag(drag)
    onDrag (drag) {
      const up = () => {
        document.removeEventListener('mousemove', drag)
        document.removeEventListener('mouseup', up)
        // 监听鼠标移动事件，移动过程中不断改变被拖拽元素的位移
      document.addEventListener('mousemove', drag)
      // 监听鼠标松开事件，当鼠标松开时，取消元素位移改变
      document.addEventListener('mouseup', up)