vue简单实现拖拽添加数据

拖拽事件和属性

标记 这个很重要!!! 这个决定了拖拽事件的行为。当点击开始拖拽之后，鼠标点击所在的位置就是标记。
dragstart：当单击下鼠标，并移动之后执行。

drag：在dragstart执行之后，鼠标在移动时连续触发。

dragend：当拖拽行为结束，也就是松开鼠标的时候触发。

dragenter：当正在拖拽的元素的标记进入某个Dom元素时触发，自身首先会触发。被进入的Dom元素会触发这个事件。

dragover：当拖拽的元素的标记在进入的Dom元素上移动时触发，在自身移动时也会触发。

dragleave：当拖拽的元素在离开进入的Dom时触发。

H5拖拽属性

draggable：当需要某个元素可以拖拽时，需设置为true，默认为false。选中的文本、图片、链接默认可以拖拽。

DataTransfer对象：该属性用于保存拖放的数据和交互信息，该组件没有使用到，暂忽略。

常规

只需要监听三个事件dragstart、dragenter、dragend。需要知道开始拖拽时的元素是谁，拖拽后去往的元素是哪个，以及最后拖拽的结束。

打破常规

@dragenter.prevent @dragover.prevent
// 阻止浏览器默认行为，不然会显示一个叉叉，不好看

• 阻止默认行为

@dragleave.stop=“dragleave($event, ‘main’)”

• 进入离开当前元素都会触发

@dragend.stop=“dragEnd($event, item)”

• 放下拖拽内容触发

	<a-col  :sm="24" :md="12" :xl="6"  class="draggable"  @dragleave.stop="dragleave($event, 'main')">
          <div class="label-head">
                <a-checkbox @change="onAllChange($event,'main')" :checked="checkAllMain">
                   全选
                </a-checkbox>
            </div>
           <div class="drag-center">
            <div  @dragenter.prevent @dragover.prevent v-for="(item,index) in draggableMain" :key="index" :draggable="true" class="drag-card __drag_item"
            @dragend.stop="dragEnd($event, item)">
                <label>
                    <a-checkbox @change="onChange($event,'main',item,index)" :checked="item.check">
                        {{item.name}}
                    </a-checkbox>
                </label>
                <div @click="plusEvent(item)"><a-icon type="plus" /></div>
                <!-- <div style="height:100px">
                {{item.name}}----{{index}}
                </div> -->
            </div>
           </div>
      </a-col>

完成交互
交换Dom位置时，左右有个10%的晃动吧~

<style scoped>
.__drag_item {
  animation: shake .3s;
}
@keyframes shake {
  0% {
    transform: translate3d(-10%, 0, 0);
  }
  50% {
    transform: translate3d(10%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
</style>

这就是Vue的特性：数据驱动视图