挑戰30天在頭條寫日記#

js 有關于拖拽功能實現的API

<div draggable = "true"></div>

JavaScript拖拽功能可以通過以下步驟實現：

1.選定要進行拖拽的元素（例如一個圖像或一個文本框）

2.為元素添加鼠標事件處理程序，包括mousedown、mousemove和mouseup事件。當鼠標按下時，將元素標記為“可拖拽”；當鼠標移動時，拖拽元素；當鼠標松開時，取消拖拽。

3.在mousemove事件處理程序中，可以計算鼠標位置和元素位置之間的差異，并將元素的位置設置為鼠標位置減去差異。

以下是一個簡單的JavaScript拖拽功能的示例：

const draggableElement = document.getElementById("draggable");

// 初始化一些變量
let offsetX = 0;
let offsetY = 0;
let isDragging = false;

// 添加mousedown事件處理程序
draggableElement.addEventListener("mousedown", function(e) {
  // 標記元素為可拖動
  isDragging = true;
  // 計算鼠標位置和元素位置之間的差異
  offsetX = e.offsetX;
  offsetY = e.offsetY;
});

// 添加mousemove事件處理程序
draggableElement.addEventListener("mousemove", function(e) {
  // 如果元素被標記為可拖動，則拖動元素
  if (isDragging) {
    // 將元素位置設置為鼠標位置減去差異
    draggableElement.style.left = (e.pageX - offsetX) + "px";
    draggableElement.style.top = (e.pageY - offsetY) + "px";
  }
});

// 添加mouseup事件處理程序
draggableElement.addEventListener("mouseup", function() {
  // 取消元素的拖拽標記
  isDragging = false;
});

例子：

對于Vue，同樣可以使用第三方拖拽庫，如Vue.Draggable等。以下是使用

vue實現拖拽功能的示例：

1. 安裝必要的庫 使用npm或yarn安裝 Vue.Draggable庫：

npm install vuedraggable

2. 創建拖拽源和目標 在Vue中，需要使用draggable組件和dropzone組件來創建拖拽源和目標。 例如，創建一個拖拽源：

<template>
  <draggable :element="'div'" :options="dragOptions" :data-id="id">
    // 元素內容
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  props: ['id'],
  data() {
    return {
      dragOptions: {
        // 拖拽選項
      }
    }
  }
}
</script>

這里，使用了draggable組件來創建拖拽源，通過element屬性指定了元素的標簽，通過options屬性指定了拖拽選項，例如handle屬性可以指定拖拽的手柄，group屬性可以指定拖拽源和目標的分組等。 同樣地，在Vue中，也可以創建一個拖拽目標：

<template>
  <dropzone :options="dropOptions">
    // 放置區域的內容
  </dropzone>
</template>

<script>
import { Droppable } from 'vuedraggable';
export default {
  components: { Droppable },
  data() {
    return {
      dropOptions: {
        // 放置區域選項
      }
    }
  }
}
</script>

這里，使用了dropzone組件來創建拖拽目標，通過options屬性指定了放置區域的選項，例如group屬性可以指定拖拽源和目標的分組等。 3. 綁定拖拽事件 在拖拽源和拖拽目標中，可以綁定一些拖拽事件，例如start、end、add、remove等事件，用于處理拖拽過程中的操作。例如，在拖拽源中綁定start事件：

<template>
  <draggable :element="'div'" :options="dragOptions" :data-id="id" @start="onDragStart">
    // 元素內容
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  props: ['id'],
  data() {
    return {
      dragOptions: {
        // 拖拽選項
      }
    }
  },
  methods: {
    onDragStart(event) {
      // 處理拖拽開始時的操作
    }
  }
}
</script>

在拖拽目標中，綁定add事件：

<template>
  <dropzone :options="dropOptions" @add="onDrop">
    // 放置區域的內容
  </dropzone>
</template>

<script>
import { Droppable } from 'vuedraggable';
export default {
  components: { Droppable },
  data() {
    return {
      dropOptions: {
        // 放置區域選項
      }
    }
  },
  methods: {
    onDrop(event) {
      // 處理拖拽完成后的操作
    }
  }
}
</script>

這里，通過@start和@add等事件綁定，可以處理拖拽開始和拖拽完成后的操作。

最后：給大家推薦幾款vue常用的拖拉拽組件和框架

1. Vue.Draggable - 這是一個基于 Vue.js 的拖拽組件，可用于實現拖拽排序、拖拽交互等功能。它支持各種元素和列表的拖拽，并提供了豐富的事件和配置選項。

https://github.com/SortableJS/Vue.Draggable

2. Vue-Sortable - 這是一個簡單易用的 Vue.js 拖拽排序庫，它提供了拖拽列表項的功能，并支持自定義排序規則和回調函數。

https://github.com/sagalbot/vue-sortable

3. Vuedraggable - Vuedraggable 是一個基于 Vue.js 的拖拽和排序庫，可以實現元素的拖拽和排序功能。它支持嵌套列表的拖拽和排序，并提供了豐富的事件和配置選項。

https://github.com/SortableJS/Vue.Draggable

4. Vue Grid Layout - Vue Grid Layout 是一個用于構建可拖拽和可調整大小的網格布局的組件庫。它提供了類似于網格系統的功能，可以輕松地創建可自定義的網格布局。

https://github.com/jbaysolutions/vue-grid-layout

5. Vue2-Dragula - 這是一個基于Dragula庫的Vue 2.x的拖拽組件，可以實現復雜的拖放交互和排序功能。

https://github.com/Astray-git/vue2-dragula

6. Vue-Draggable-resizable - 這個組件提供了可拖拽和可調整大小的元素，可以輕松地創建可自定義的布局。它支持拖放、調整大小、限制范圍等功能。

https://github.com/mauricius/vue-draggable-resizable

7. Vue-Sortablejs - 這是一個基于Sortable.js庫的Vue 2.x的拖拽和排序組件，提供了可拖拽的列表和柵格布局功能。

https://github.com/SortableJS/Vue.Sortable

8. Vue-Draggable - 這個組件提供了基本的拖拽功能，適用于簡單的拖放需求。它支持拖拽元素和容器之間的交互，并提供了一些事件和配置選項。

https://github.com/SortableJS/Vue.Draggable

這些組件和框架都是在 Vue.js 生態系統中常用的拖拽相關工具，可以根據項目的需求選擇合適的組件來實現拖拽功能。

簡介】

拖放是一種常見的特性, 屬于html5標準的一部分, 即抓取對象以后拖動到另一個位置, 在html5中, 任何元素都可被設置拖放。首先, 我們要給需要拖動的HTML元素啟用拖動功能, 設置屬性draggable="true",

<div draggable="true"></div>

提示：a標簽和img標簽默認是啟用該屬性的, 可不需要設置draggable屬性。

draggable有三個值, 如下所示：

draggable = true(元素可以被拖動)

draggable = false(元素不能被拖動)

draggable = auto(瀏覽器可以自主決定某個元素是否可以被拖動)

【用法】

當我們用鼠標拖拽目標元素過程中會觸發的事件：

ondragstart：用戶按下鼠標開始拖動時觸發

ondrag：用戶正在拖動時反復觸發

ondragend：用戶結束拖動后觸發

<img id="imgs" ondragstart="startFun()" ondrag="ondragFun()" ondragend="ondragendFun()" src="../img/a.png"/>

當拖動元素進入目標容器內觸發的事件：

ondragenter：鼠標拖動對象進入釋放區時觸發

ondragover：被拖動物體進入目標容器內移動時反復觸發

ondragleave：拖動對象在釋放區沒有釋放就離開容器時觸發

ondrop：被拖動物體在目標容器內釋放時觸發

<div id="container" ondragenter="ondragenterFun(event)" ondragover="ondragoverFun(event)" ondragleave="ondragleaveFun()" ondrop="drop()"></div>

ondragenter和ondragover事件的默認行為是拒絕接受任何被拖放的項目, 所以我們必須要做的最重要的事情就是防止這種默認行為的發生。

因此, 我們只需要在這兩個事件調用的函數中傳入event對象, 使用event.preventDefault()就可取消這種默認行為；舉個例子, 在drop事件時, Firefox瀏覽器會關閉網頁, 轉而顯示被拖動圖片img元素src所引用的地址。

取消元素默認行為：

function ondragenterFun(e){

e.preventDefault();

}

function ondragoverFun(e){

e.preventDefault();

}

在event對象中, 我們會使用dataTransfer屬性來獲取DataTransfer對象, 在DataTransfer對象中有我們操作數據的屬性和方法, 具體如下：

datatransfer：轉移釋放元素的數據到釋放區, 返回Datatransfer對象

event.dataTransfer //返回DataTransfer對象

DataTransfer對象的屬性：

files：處理從操作系統拖動并釋放到釋放區的文件；

types：返回一個字符串數組, 該對象包含了dataTransfer對象中數據的所有類型；

items：返回DataTransferItems對象, 該對象代表了拖動數據；

dropEffect：設置拖放目標允許發生的拖放行為, 如果此處設置的拖放行為不在effectAllowed屬性設置的可拖放行為內, 拖放操作將會失敗。該屬性值只允許為"null"、"copy"、"link"或"move"；

effectAllowed：設置拖動元素允許發生的拖動行為, 該屬性值可為"none"、"copy"、"copyLink"、"copyMove"、"link"、"linkMove"、"move"、"all"或"uninitialized"；

DataTransfer對象的方法：

setData( format , data )：將指定格式的數據賦值給dataTransfer對象，參數format定義數據的格式也就是數據的類型，data為待賦值的數據。

getData( format )：從dataTransfer對象中獲取指定格式的數據，format代表數據格式，data為數據。

clearData( [format] )：從dataTransfer對象中刪除指定格式的數據，參數可選，若不給參數，將刪除對象中所有的數據。

setDragImage(el, x, y)：設置拖放操作的圖標，其中el代表自定義圖標，x代表圖標與鼠標在水平方向上的距離，y代表圖標與鼠標在垂直方向上的距離。

了解了H5拖動使用的api以后我們接下來看一個綜合的案例, 功能如下：

1)、實現圖片拖動功能；

2)、實現圖片復制功能；

3)、過濾不能拖動的元素；

4)、實現拖動本地圖片到瀏覽器指定位置；

公共css部分：

<style>

#dropIn{

border:1px solid #AAAAAA;

height:100px;

margin-bottom: 10px;

padding: 10px;

}

#dropIn>img{

margin-right: 10px;

border:2px solid deepskyblue;

}

img{

width:100px;

border-radius: 10px;

border:2px solid red;

}

</style>

html部分：

<body>

<div id="dropIn"></div> <!--釋放區-->

<img id="drop1" src="img/a.png" alt="" />

<!--拖動的圖片元素-->

</body>

js部分：

<script type="text/javascript">
var darggID;
function getId(el){
return document.getElementById(el)
}
var dropId1 = getId("drop1");
var dropInId = getId("dropIn");
//取消事件默認行為
dropInId.ondragenter = cancelDefault;
dropInId.ondragover = cancelDefault; //綁定拖動元素釋放時觸發的事件
dropInId.ondrop = drop; //綁定
dropId1.ondragstart = startFun;
function cancelDefault(ev){ //取消默認行為
ev.preventDefault();
}
function startFun(ev){
darggID = ev.target.id;
//獲取被拖動元素的id
//從源對象上的事件處理中保存數據，數據類型為"Text"
ev.dataTransfer.setData("Text",darggID);
}
function drop(ev){
ev.preventDefault();
// 從目標對象上的事件處理中讀取"Text"類型數據
var data=ev.dataTransfer.getData("Text");
// 插入到目標對象中
ev.target.appendChild(document.getElementById(data));
}
</script>

接下來我們添加兩張圖, "drop2"是實現復制的圖片, "drop3"是既不能復制也不能拖動的圖片；

<img id="drop2" src="img/b.png" alt="" /><img id="drop3" src="img/c.png" alt="" />

添加js代碼：

//獲取頁面元素

var dropId2 = getId("drop2");

var dropId3 = getId("drop3");

//綁定事件

dropId2.ondragstart = startFun;dropId3.ondragstart = startFun;

//修改drop函數為

function drop(ev){

ev.preventDefault();

// 從目標對象上的事件處理中讀取"Text"類型數據

var data=ev.dataTransfer.getData("Text");

if(data=='drop1'){

//移動

ev.target.appendChild(document.getElementById(data));

}

if(data=='drop2'){//復制

var nreEl=document.getElementById(darggID).cloneNode(false);

getId("dropIn").appendChild(nreEl);

}

if(data=='drop3'){//過濾drop3，drop3不做任何操作

alert('過濾drop3')

}

}

接下來我們實現拖動本地圖片到瀏覽器, 我們就將圖片拖動到id為"dropIn"的這個div中；添加js:

/*document 監聽drop 并阻止瀏覽器打開客戶端的圖片*/

document.ondragover = function (e) {

//只有在ondragover中阻止默認行為

e.preventDefault();

};

document.ondrop = function (e) {

//阻止 document.ondrop的默認行為

e.preventDefault();

};

//dropIn是div的id

dropIn.ondrop = function (e) {

var list = e.dataTransfer.files;

for (var i = 0; i < list.length; i++) {

var f = list[i];

reader(f);

}

};

function reader(f) {

var reader = new FileReader();

//讀取數據

reader.readAsDataURL(f);

reader.onload = function () {

var img = new Image();

img.src = reader.result;

dropIn.appendChild(img);

}

}

【瀏覽器支持】

目前只有Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari5支持拖放，在 Safari5.1.2 中不支持拖放。

最后再和大家分享一個技巧, 這種拖動行為還能跨瀏覽器工作, 這里說的跨瀏覽器不是瀏覽器之間的跨窗口, 而是可以從Chrome瀏覽器拖動到Firefox瀏覽器, 因為拖放功能的支持是集成在操作系統里面的, 有著相同的特性。