Vue.js學習筆記（8）拖放

小穎在目前負責的項目中,負責給同事提供所需組件,在這期間,我們家大穎姐姐讓我 寫個拖拽組件,一開始我是用click實現,先將你要拖拽的dom點一下,然后再點你要放的位置,這個dom再通過小穎寫的方法,渲染在你要顯示的地方,雖然功能實現了,可是沒有實現拖拽,我那是點擊,所以小穎今天就看了下html5的拖放,然后寫了個小示例,希望對大家有所幫助.

小穎是用vue寫的嘻嘻,大家要是用js實現的話看看HTML 5 拖放

代碼請看這里,當當當當:

html:

<template>
<div class='drag-content'>
  <div class='project-content'>
    <div class='select-item' draggable='true' @dragstart='drag($event)' v-for='pjdt in projectdatas'>{{pjdt.name}}</div>
  </div>
  <div class='people-content'>
    <div class='drag-div' v-for='(ppindex,ppdt) in peopledata' @drop='drop($event)' @dragover='allowDrop($event)'>
      <div class='select-project-item'>
        <label class='drag-people-label'>{{ppdt.name}}:</label>
      </div>
    </div>
  </div>
</div>
</template>

css代碼：

<style scoped>
.select-item {
  background-color: #5bc0de;
  display: inline-block;
  text-align: center;
  border-radius: 3px;
  margin-right: 10px;
  cursor:pointer;
  padding: 6px 20px;
  color: #fff;
}
 .cursored{
  cursor: default;
}
.project-content,.people-content {
    margin: 30px 50px;
}
.people-content {
    margin-top: 30px;
}
.drag-div {
    border: 1px solid #5bc0de;
    padding:10px;
    margin-bottom: 10px;
    width: 800px;
    cursor: pointer;
}
.select-project-item {
    display: inline-block;
    text-align: center;
    border-radius: 3px;
}
.drag-people-label{
  margin-bottom:0;
  padding-right:10px;
}
</style>

<div class='select-item' draggable='true' @dragstart='drag($event)' v-for='pjdt in projectdatas'>{{pjdt.name}}</div>

在這行代碼中小穎在綁定dragstart事件時,drag($event)寫法和js寫法不一樣,如果你在vue中綁定事件時要傳 'event',你不能像js那種格式去寫 ,比如:@dragstart='drag(event)'  這個寫的話你在drag方法中獲取到的event是  undefined,因為它把   @dragstart='drag(event)'  中的event當成了一個變量,而該變量並沒有在data中定義所以就是 undefined.早上小穎就碰到過此坑.所以切記格式是介個醬紫的:  @dragstart='drag($event)'

js代碼：

<script>
let dom = null
export default {
  components: {
  },
  ready: function() {
  },
  methods: {
    drag:function(event){
       dom = event.currentTarget
    },
    drop:function(event){
      event.preventDefault();
      event.target.appendChild(dom);
    },
    allowDrop:function(event){
      event.preventDefault();
    },
  },
  data() {
    return {
      projectdatas:[{
        id:1,
        name:'葡萄',
      },{
        id:2,
        name:'芒果',
      },{
        id:3,
        name:'木瓜',
      },{
        id:4,
        name:'榴蓮',
      }],
      peopledata:[{
        id:1,
        name:'小穎',
      },{
        id:2,
        name:'hover',
      },{
        id:3,
        name:'空巢青年三 ',
      },{
        id:3,
        name:'一丟丟',
      }]
    }
  }
}
</script>

 頁面效果就是介個醬紫的: