在vue2中使用vuedraggable拖拽功能示例

// disabled true为开启拖拽状态
<draggable v-model="myAppList" :disabled="editDraggable" chosenClass="chosen" forceFallback="false" group="people" animation="300" @start="onStart" @end="onEnd">
      <transition-group style="position: relative;width: 120px">
        <div class="item" v-for="element in myAppList" :key="element.id">
          <i class="el-icon-remove" id="deleteIcon" v-show="!editDraggable" @click="$emit('deleteApp',element)"></i>
          <div v-html="element.icon" v-if="element.icon && element.icon.indexOf('svg') !== -1" class="bottomLogo" @click="jumpPath(element)"></div>
          <div v-else class="bottomLogo">
            <img :width="50" :height="50" :src="element.icon" class="bottomLogo" alt=""/>
          </div>
          <p style="text-align: center;margin-top: 85px;margin-left: -10px;position: absolute;width: 100px">{{element.name}}</p>
        </div>
      </transition-group>
    </draggable>

引入

import draggable from 'vuedraggable'

引入后自动npm即可