色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue2.0 dragstart

李中冰2年前9瀏覽0評論

在Vue2.0中,我們可以使用dragstart事件來實現拖放功能。也就是說,我們可以拖動一個元素并將其放置到其他地方。

在開始實現拖放功能之前,我們需要了解拖放事件模型。關于拖放事件模型,有三個事件需要注意,它們分別是dragstart、dragover和drop事件。

// 監聽dragstart事件
element.addEventListener('dragstart', function(event) {
// 開始拖放的時候做些什么
});
// 監聽dragover事件
element.addEventListener('dragover', function(event) {
// 拖放元素進入一個有效的放置目標上方時會觸發這個事件
});
// 監聽drop事件
element.addEventListener('drop', function(event) {
// 拖放元素放置在一個有效的目標上時會觸發這個事件
});

其中,dragstart事件表示開始拖動元素時觸發。它可以在被拖動的元素上觸發,也可以在其他元素上觸發。在dragstart事件觸發后,我們可以使用setData()方法來設置拖動的數據。通常我們會設置一個參數,用于標識被拖動的元素。

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

在dragover事件中,我們可以使用event.preventDefault()方法來避免瀏覽器默認的拖放行為。同時,我們可以使用event.dataTransfer.dropEffect屬性來指定拖動時的反饋類型,比如move或copy等。

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

在drop事件中,我們可以使用event.preventDefault()方法來避免瀏覽器默認的拖放行為。同時,我們可以使用event.dataTransfer.getData()方法來獲取拖動的數據。

// 避免瀏覽器默認的拖放行為
event.preventDefault();
// 獲取拖動的數據
var id = event.dataTransfer.getData('text/plain');

現在,我們可以根據上述介紹來實現一個基本的拖放功能。我們先創建兩個div,并且把第一個div設置為可拖動的元素。當拖動第一個div時,會向dragover和drop事件發送請求。在dragover事件中,我們避免了瀏覽器默認的拖放行為,同時指定了拖動時的反饋類型為move。在drop事件中,我們同樣避免了瀏覽器默認的拖放行為,并且把第一個div元素的文本內容設置為被拖動元素的文本內容。

<div draggable="true">拖動我</div>
<div id="dropzone">放置區</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事件是一個非常有用的事件,可以用來實現各種拖放功能。我們需要了解拖放事件模型,并使用setData()、event.preventDefault()和event.dataTransfer.getData()等方法來處理拖放事件。