Vue-with sortable

by ChangJoo Park

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.5.0/Sortable.min.js"></script>

<div id="app">
  <div class="header">
    즐겨찾기 
    <button @click="toggleSortable">
      <template v-if="editing">
        &#x2713;        
      </template>
      <template v-else>
        &#x2699;
      </template>
    </button>
  </div>
  <ul id="favorite">
    <li class="item" v-for="item in favoriteItems">
        <span class="star-icon" v-if="!editing" @click="toggleFavorite(item)">&#x2605;</span>  
      <span class="drag-handle" v-if="editing">&#9776;</span> 
      {{item.name}}
    </li>
  </ul>
  <div class="header">기본 그룹</div>
  <div class="item" v-for="item in normalItems">
    <span class="star-icon" v-if="!editing" @click="toggleFavorite(item)">&#x2606;</span>
    {{item.name}}
  </div>
</div>

CSS

#favorite {
  list-style: none;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
}
.drag-handle, .star-icon {
  cursor: pointer;
}
.star-icon {
  font-size: 1rem;
}
.star-icon:hover {
  animation-duration: 0.3s;
  animation-name: beating-star;
  animation-iteration-count: infinity
}

@keyframe beating-star {
  from {
    font-size: 1rem;
  }
  
  to {
    font-size: 1.2rem;
  }
}

JavaScript

var dummyData = [
	{ id: 1, name: 'Item 1', order: 1, favorite: false },
  { id: 2, name: 'Item 2', order: 2, favorite: false },
  { id: 3, name: 'Item 3', order: 3, favorite: true },
  { id: 4, name: 'Item 4', order: 4, favorite: false },
  { id: 5, name: 'Item 5', order: 5, favorite: false },
  { id: 6, name: 'Item 6', order: 6, favorite: true },
  { id: 7, name: 'Item 7', order: 7, favorite: true },
  { id: 8, name: 'Item 8', order: 8, favorite: false },
  { id: 9, name: 'Item 9', order: 9, favorite: false }
];

new Vue({
	el: '#app',
  mounted: function () {
  	//var favoriteList = this.$el.querySelector('#favorite')
    Sortable.create(favorite, {
      handle: '.drag-handle',
      animation: 150
    });  
  },
  data: function () {
  	return {
    	items: dummyData,
      editing: false
    }
  },
	computed: {
  	favoriteItems: function () {
    	return this.items.filter(function (item){
      	return item.favorite === true;
      });
		},
  	normalItems: function () {
    	return this.items.filter(function (item){
      	return item.favorite === false;
      });
		}    
	},
  methods: {
  	toggleSortable: function () {
    	this.editing = !this.editing;
		},
    toggleFavorite: function (item) {
    	item.favorite = !item.favorite;
		}
  }
})