<!DOCTYPE HTML>
<html>
<meta charset="utf8">
<head>
<style>
body {
font-size: 14px;
}
.dropBox {
min-height: 50px;
}
ul, ol {
margin: 0;
}
caption {
font-size: 18px;
font-weight: bold;
text-align: left;
}
table {
width: 100%;
border: 1px solid black;
margin-bottom: 10px;
border-spacing: 0;
}
table th, table td {
border: 1px solid black;
padding: 5px;
}
.readOnly {
margin: 5px;
padding: 3px;
color: white;
background-color: gray;
border-radius: 5px;
font-size: 10px;
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=0; i<dt.types.length; i++) {
var type = dt.types[i];
var data = event.dataTransfer.getData(type);
console.log(type);
console.log(data);
if(i != 0) {
event.target.innerHTML += "<br>"
}
event.target.innerHTML += (
"types.length = " + dt.types.length + "<br>" +
(i + 1) + ".type : " + type + "<br> data : "
);
switch(type) {
case "Files":
event.target.innerHTML += ("file length = " + dt.files.length);
for(var j=0; 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);
dt.effectAllowed = event.srcElement.innerHTML;
}
function onDragStartPlain() {
event.dataTransfer.setData("text/plain", event.target.innerHTML);
}
function onDragStartLink() {
var dt = event.dataTransfer;
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;
dt.setData("custom", "custom");
var img1 = document.getElementById("img");
dt.setDragImage(img1, 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>
<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>
转载请注明原文地址: https://ju.6miu.com/read-663137.html
