<template>
  <el-card>
    <div class="row">
      <div class="col-6">
        <draggable class="list-group" tag="ul" v-model="list" v-bind="dragOptions" @start="drag = true"
          @end="drag = false">
          <transition-group type="transition" :name="!drag ? 'flip-list' : null">
            <li class="list-group-item" v-for="element in list" :key="element.order">
              <i :class="element.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'
                " @click="element.fixed = !element.fixed" aria-hidden="true"></i>
              {{ element.name }}
            </li>
          </transition-group>
        </draggable>
      </div>
    </div>
  </el-card>
</template>

<script>
import draggable from "vuedraggable";
const message = [
  "vue.draggable",
  "draggable",
  "component",
  "for",
  "vue.js 2.0",
  "based",
  "on",
  "Sortablejs"
];
export default {
  name: "transition-example-2",
  display: "Transitions",
  order: 7,
  components: {
    draggable
  },
  data() {
    return {
      list: message.map((name, index) => {
        return { name, order: index + 1 };
      }),
      drag: false
    };
  },
  methods: {
    sort() {
      this.list = this.list.sort((a, b) => a.order - b.order);
    }
  },
  computed: {
    dragOptions() {
      return {
        animation: 200,
        group: "description",
        disabled: false,
        ghostClass: "ghost"
      };
    }
  }
};
</script>

<style lang="scss">
.el-card__body {
    padding:  15px 10px 0px 10px !important;
}
.list-group {
  min-height: 20px;
  max-height: 150px;
  overflow: auto;
  margin-top: 0;
  padding: 0;

  &::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }

  &::-webkit-scrollbar-track {
    background-color: #fff;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 20px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: #409eff;
  }

  &::-webkit-scrollbar-track-piece {
    background: #F2F6FC;
  }
}

.list-group-item {
  cursor: move;
  padding: 5px 0px;
}

.list-group-item i {
  cursor: pointer;
}
</style>