<!DOCTYPE HTML>
<html>
<meta charset="utf8">
<head>
<style>
body {
font-size: px;
}
.dropBox {
min-height: px;
}
ul, ol {
margin: ;
}
caption {
font-size: px;
font-weight: bold;
text-align: left;
}
table {
width: %;
border: px solid black;
margin-bottom: px;
/* 将單元格之間的間距設為0 */
border-spacing: ;
}
table th, table td {
border: px solid black;
padding: px;
}
.readOnly {
margin: px;
padding: px;
color: white;
background-color: gray;
border-radius: px;
font-size: px;
font-weight: bold;
}
</style>
<script>
function onDropOver() {
//預設地，無法将資料/元素放置到其他元素中。如果需要設定允許放置，我們必須阻止對元素的預設處理方式。
event.preventDefault();
}
function onDrop() {
if(event.type !== "drop") {
return;
}
//取消預設的處理方式
event.preventDefault();
//删除所有子元素
event.target.innerHTML = "";
var dt = event.dataTransfer;
for(var i=; i<dt.types.length; i++) {
var type = dt.types[i];
var data = event.dataTransfer.getData(type);
console.log(type);
console.log(data);
if(i != ) {
event.target.innerHTML += "<br>"
}
//以下2種方式都是設定純文字,無法換行
//event.target.textContent = data;
//event.target.appendChild(document.createTextNode(data));
event.target.innerHTML += (
"types.length = " + dt.types.length + "<br>" +
(i + ) + ".type : " + type + "<br> data : "
);
switch(type) {
case "Files":
event.target.innerHTML += ("file length = " + dt.files.length);
for(var j=; j<dt.files.length; j++) {
var file = dt.files[j];
console.log(file);
event.target.innerHTML += ("<br> " + j + ". " + file.name + ", 大小: " + file.size + "位元組, 上次修改時間: " + new Date(file.lastModified) + ", 類型: " + file.type);
}
break;
default:
event.target.innerHTML += data;
}
}
console.log(dt);
}
function onDragStartEffect() {
var dt = event.dataTransfer;
//注意:資料類型最好小寫,即使有大寫字元也會被自動轉為小寫的
dt.setData("dropEffect", event.srcElement.innerHTML);
//effectAllowed預設是uninitialized,指定允許那種drop效果,如果隻允許一種效果，那麼不用設定dropEffect 就會自動使用該效果
dt.effectAllowed = event.srcElement.innerHTML;
}
function onDragStartPlain() {
event.dataTransfer.setData("text/plain", event.target.innerHTML);
}
function onDragStartLink() {
var dt = event.dataTransfer;
//目前還沒找到傳遞多個uri的方法.因為注釋前面的換行符會被轉義,其它的被丢棄;使用其它字元來分割也差不多,注釋前面的被轉義,其它的保持不變
//var urlList = ["http://www.example.com", "#A second link", "http://blog.csdn.net/chy555chy"].join("\n");
//var urlList = ["http://www.example.com", "https://www.baidu.com", "http://blog.csdn.net/chy555chy"].join("\n");
var urlList = "http://www.example.com";
dt.setData("text/uri-list", urlList);
dt.setData("text/plain", event.target.innerHTML);
}
function onDragStartHtml() {
var dt = event.dataTransfer;
dt.setData("text/html", "Hello there, <strong>stranger</strong>");
dt.setData("text/plain", "Hello there, stranger");
}
function onDragStartCustom() {
var dt = event.dataTransfer;
//據我多次實驗,setData會自動将非文本轉化成文本
dt.setData("custom", "custom");
//方法一:
var img1 = document.getElementById("img");
//設定拖動時顯示的圖像相對滑鼠的位置
dt.setDragImage(img1, , );
/*
//方法二:以下兩種建立方式都是一樣的
var img2 = new Image();
//var img2 = document.createElement("img");
img2.src = "https://www.baidu.com/img/bd_logo1.png";
//這裡幾種改變image大小的方法都是無效的
img2.width = "50px";
img2.height = "30px";
img2.width = 50;
img2.height = 30px";
img2.style.width="50px";
img2.style.height="30px";
dt.setDragImage(img2, 0, 0);
*/
}
</script>
</head>
<body>
<p>MDN dataTransfer part: <a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer</a></p>
<p>MDN event part: <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API</a></p>
<p>MDN effectAllowed part: <a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed</a></p>
<p>MDN drag type part: <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types</a></p>
<table>
<caption>dataTransfer properties</caption>
<tr>
<th>Property</td>
<th>Description</td>
</tr>
<tr>
<td>dropEffect</td>
<td>Gets the type of drag-and-drop operation currently selected or sets the operation to a new type. The value must be none, copy, link or move.</td>
</tr>
<tr>
<td>effectAllowed</td>
<td>Provides all of the types of operations that are possible. Must be one of none, copy, copyLink, copyMove, link, linkMove, move, all or uninitialized.</td>
</tr>
<tr>
<td>files</td>
<td>Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list.</td>
</tr>
<tr>
<td>items<span class="readOnly">Read Only</span></td>
<td>Gives a DataTransferItemList object which is a list of all of the drag data.</td>
</tr>
<tr>
<td>types<span class="readOnly">Read Only</span></td>
<td>An array of strings giving the formats that were set in the dragstart event.</td>
</tr>
<tr>
<td>setDragImage(element, x, y)</td>
<td>Set the image to be used for dragging if a custom one is desired.</td>
</tr>
<tr>
<td>clearData([format])</td>
<td>Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.</td>
</tr>
<tr>
<td>getData(format)</td>
<td>Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.</td>
</tr>
<tr>
<td>setData(format, data)</td>
<td>Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.</td>
</tr>
</table>
<table>
<caption>drag events</caption>
<tr>
<th>Event</th>
<th>On Event Handler</th>
<th>Description</th>
</tr>
<tr>
<td>drag</td>
<td>ondrag</td>
<td>Fired when an element or text selection is being dragged.</td>
</tr>
<tr>
<td>dragend</td>
<td>ondragend</td>
<td>Fired when a drag operation is being ended (for example, by releasing a mouse button or hitting the escape key). (See Finishing a Drag.)</td>
</tr>
<tr>
<td>dragenter</td>
<td>ondragenter</td>
<td>Fired when a dragged element or text selection enters a valid drop target. (See Specifying Drop Targets.)</td>
</tr>
<tr>
<td>dragexit</td>
<td>ondragexit</td>
<td>Fired when an element is no longer the drag operation's immediate selection target.</td>
</tr>
<tr>
<td>dragleave</td>
<td>ondragleave</td>
<td>Fired when a dragged element or text selection leaves a valid drop target.</td>
</tr>
<tr>
<td>dragover</td>
<td>ondragover</td>
<td>Fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).</td>
</tr>
<tr>
<td>dragstart</td>
<td>onddragstart</td>
<td>Fired when the user starts dragging an element or text selection. (See Starting a Drag Operation.)</td>
</tr>
<tr>
<td>drop</td>
<td>ondrop</td>
<td>Fired when an element or text selection is dropped on a valid drop target. (See Performing a Drop.)</td>
</tr>
</table>
<h2>effectAllowed & dropEffect</h2>
<ol>
<li draggable="true" onDragStart="onDragStartEffect()">none</li>
<li draggable="true" onDragStart="onDragStartEffect()">copy</li>
<li draggable="true" onDragStart="onDragStartEffect()">copyLink</li>
<li draggable="true" onDragStart="onDragStartEffect()">copyMove</li>
<li draggable="true" onDragStart="onDragStartEffect()">link</li>
<li draggable="true" onDragStart="onDragStartEffect()">linkMove</li>
<li draggable="true" onDragStart="onDragStartEffect()">move</li>
<li draggable="true" onDragStart="onDragStartEffect()">all</li>
<li draggable="true" onDragStart="onDragStartEffect()">uninitialized</li>
</ol>
<fieldset>
<legend>Drop Box</legend>
<!-- 之是以要設定draggable=false,是因為drop來的元素都會被當成text/html,自動設定為拖動内容 -->
<div class="dropBox" draggable="false" onDragOver="onDropOver()" onDrop="onDrop()"></div>
</fieldset>
<h2>transfer type</h2>
<ol>
<li draggable="true" onDragStart="onDragStartPlain()">拖拽文本(Dragging Text)</li>
<li draggable="true" onDragStart="onDragStartLink()">拖拽連結(Dragging Links)</li>
<li draggable="true" onDragStart="onDragStartHtml()">拖拽HTML與XML(Dragging HTML and XML)</li>
<li>拖拽檔案(Dragging Files)</li>
<li>拖拽圖檔(Dragging Images)<img id="img" width="50" height="30" src="https://www.baidu.com/img/bd_logo1.png"></li>
<li>拖拽節點(Dragging Nodes)</li>
<li draggable="true" onDragStart="onDragStartCustom()">拖拽自定義資料(Dragging Custom Data)</li>
<li>拖拽檔案到一個作業系統檔案夾(Dragging files to an operating system folder)</li>
</ol>
<fieldset>
<legend>Drop Box</legend>
<div class="dropBox" draggable="false" onDragOver="onDropOver()" onDrop="onDrop()"></div>
</fieldset>
</body>
</html>
![APP強制更新(uni-app)項目要求：解決思路：效果圖：具體代碼：總結[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)