在Vue2.0中，我們可以使用dragstart事件來(lái)實(shí)現(xiàn)拖放功能。也就是說(shuō)，我們可以拖動(dòng)一個(gè)元素并將其放置到其他地方。

在開(kāi)始實(shí)現(xiàn)拖放功能之前，我們需要了解拖放事件模型。關(guān)于拖放事件模型，有三個(gè)事件需要注意，它們分別是dragstart、dragover和drop事件。

// 監(jiān)聽(tīng)dragstart事件
element.addEventListener('dragstart', function(event) {
// 開(kāi)始拖放的時(shí)候做些什么
});
// 監(jiān)聽(tīng)dragover事件
element.addEventListener('dragover', function(event) {
// 拖放元素進(jìn)入一個(gè)有效的放置目標(biāo)上方時(shí)會(huì)觸發(fā)這個(gè)事件
});
// 監(jiān)聽(tīng)drop事件
element.addEventListener('drop', function(event) {
// 拖放元素放置在一個(gè)有效的目標(biāo)上時(shí)會(huì)觸發(fā)這個(gè)事件
});

其中，dragstart事件表示開(kāi)始拖動(dòng)元素時(shí)觸發(fā)。它可以在被拖動(dòng)的元素上觸發(fā)，也可以在其他元素上觸發(fā)。在dragstart事件觸發(fā)后，我們可以使用setData()方法來(lái)設(shè)置拖動(dòng)的數(shù)據(jù)。通常我們會(huì)設(shè)置一個(gè)參數(shù)，用于標(biāo)識(shí)被拖動(dòng)的元素。

event.dataTransfer.setData('text/plain', element.id);

在dragover事件中，我們可以使用event.preventDefault()方法來(lái)避免瀏覽器默認(rèn)的拖放行為。同時(shí)，我們可以使用event.dataTransfer.dropEffect屬性來(lái)指定拖動(dòng)時(shí)的反饋類型，比如move或copy等。

// 避免瀏覽器默認(rèn)的拖放行為
event.preventDefault();
// 指定拖動(dòng)時(shí)的反饋類型為move
event.dataTransfer.dropEffect = 'move';

在drop事件中，我們可以使用event.preventDefault()方法來(lái)避免瀏覽器默認(rèn)的拖放行為。同時(shí)，我們可以使用event.dataTransfer.getData()方法來(lái)獲取拖動(dòng)的數(shù)據(jù)。

// 避免瀏覽器默認(rèn)的拖放行為
event.preventDefault();
// 獲取拖動(dòng)的數(shù)據(jù)
var id = event.dataTransfer.getData('text/plain');

現(xiàn)在，我們可以根據(jù)上述介紹來(lái)實(shí)現(xiàn)一個(gè)基本的拖放功能。我們先創(chuàng)建兩個(gè)div，并且把第一個(gè)div設(shè)置為可拖動(dòng)的元素。當(dāng)拖動(dòng)第一個(gè)div時(shí)，會(huì)向dragover和drop事件發(fā)送請(qǐng)求。在dragover事件中，我們避免了瀏覽器默認(rèn)的拖放行為，同時(shí)指定了拖動(dòng)時(shí)的反饋類型為move。在drop事件中，我們同樣避免了瀏覽器默認(rèn)的拖放行為，并且把第一個(gè)div元素的文本內(nèi)容設(shè)置為被拖動(dòng)元素的文本內(nèi)容。

<div draggable="true">拖動(dòng)我</div>
<div id="dropzone">放置區(qū)</div>
var draggableElement = document.querySelector('[draggable=true]');
var dropzone = document.getElementById('dropzone');
draggableElement.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text/plain', event.target.textContent);
});
dropzone.addEventListener('dragover', function(event) {
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
});
dropzone.addEventListener('drop', function(event) {
event.preventDefault();
var text = event.dataTransfer.getData('text/plain');
event.target.textContent = text;
});

總之，Vue2.0中的dragstart事件是一個(gè)非常有用的事件，可以用來(lái)實(shí)現(xiàn)各種拖放功能。我們需要了解拖放事件模型，并使用setData()、event.preventDefault()和event.dataTransfer.getData()等方法來(lái)處理拖放事件。