Open xyzdata opened 6 years ago
bug ???
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML5 Drag and Drop</title>
<style>
.test-drop {
box-sizing: border-box;
min-width: 32px;
min-height: 32px;
max-width: 320px;
max-height: 320px;
padding: 10px;
background-color: #333;
border: 1px solid #777;
}
.test-drag {
box-sizing: border-box;
width: 300px;
height: 300px;
}
.test-area {
background-color: #ccc;
}
</style>
</head>
<body>
<div>
https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API
</div>
<section class="test-area">
<p>Drag the image into the rectangle:</p>
<div id="smg" class="test-drop" ondragover="allowDrop(event)" ondrop="drop(event)">
<!-- place image here! -->
</div>
<img class="test-drag" src="https://cdn.xgqfrms.xyz/logo/icon.png" draggable="true" ondragstart="drag(event)">
</section>
<script>
const drag = (e) => {
e.dataTransfer.setData("logo", e.target.id);
console.log(`drag id = `, e.dataTransfer.getData("logo"));
};
const drop = (e) => {
e.preventDefault();
let data = e.dataTransfer.getData("logo");
console.log(`drop id = `, data);
let element = document.getElementById(data);
// let element = document.querySelector(`#data`);
e.target.appendChild(element);
};
const allowDrop = (e) => {
e.preventDefault();
// ???
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML5 Drag and Drop</title>
<style>
.test-drop {
box-sizing: border-box;
min-width: 32px;
min-height: 32px;
max-width: 320px;
max-height: 320px;
padding: 10px;
background-color: #333;
border: 1px solid #777;
}
.test-drag {
box-sizing: border-box;
width: 300px;
height: 300px;
}
.test-area {
background-color: #ccc;
}
</style>
</head>
<body>
<div>
https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API
</div>
<section class="test-area">
<p>Drag the image into the rectangle:</p>
<div class="test-drop" ondragover="allowDrop(event)" ondrop="drop(event)">
<!-- place image here! -->
</div>
<img id="img" class="test-drag" src="https://cdn.xgqfrms.xyz/logo/icon.png" draggable="true" ondragstart="drag(event)">
<!-- only can move whole element -->
<!-- id="img" -->
<!-- Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. -->
</section>
<script>
const drag = (e) => {
// e.target.id
console.log(`drag id = `, e.target.id);
e.dataTransfer.setData("logo", e.target.id);
console.log(`drag id = `, e.dataTransfer.getData("logo"));
};
const drop = (e) => {
e.preventDefault();
let data = e.dataTransfer.getData("logo");
// img
console.log(`drop id = `, data);
console.log(`drop typeof(data) = `, typeof(data));
// string
// let element = document.getElementById(data);
let element = document.querySelector(`#${data}`);
e.target.appendChild(element);
};
const allowDrop = (e) => {
e.preventDefault();
// ???
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.drop {
width: 350px;
min-height: 100px;
padding: 10px;
border: 1px solid #aaaaaa;
}
.drag {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div>
<div class="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" class="drag" src="https://cdn.xgqfrms.xyz/logo/icon.png" draggable="true" ondragstart="drag(event)">
<!-- only can move whole element -->
<!-- id="drag1" -->
<!-- Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. -->
</div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("aaa", ev.target.id);
console.log(`drag id = `, ev.target.id);
console.log(`drag logo = `, ev.dataTransfer.getData("logo"));
}
function drop(ev) {
ev.preventDefault();
var dx = ev.dataTransfer.getData("aaa");
console.log(`drop id = `, dx);
ev.target.appendChild(document.getElementById(dx));
}
</script>
</body>
</html>
https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
HTML5 Drag and Drop API
https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API
https://www.w3schools.com/html/html5_draganddrop.asp
https://www.sitepoint.com/html5-native-drag-and-drop-api/
https://medium.com/@dan_abramov/the-future-of-drag-and-drop-apis-249dfea7a15f
https://caniuse.com/#search=Drag%20and%20Drop
https://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
cursor
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
HTML5 APIs
http://www.creativebloq.com/html5/developer-s-guide-html5-apis-1122923
https://developer.mozilla.org/zh-CN/docs/Web/API/DragEvent
https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer
01. Media API
02. Text Track API
03. Drag and Drop
04. Offline Web Applications/Application Cache
05. User Interaction
06. History
07. MIME type and protocol handler registration
08. APIs in the WHATWG specification
Canvas 2D Context
Cross document and channel messaging
Microdata
Web Workers
Web Storage
Web Sockets
Server sent events
09. The "HTML5" buzzword APIs
10. Demos and browser Support
??? html5
https://platform.html5.org/
http://html5doctor.com/
http://html5gallery.com/
HTML5 Cross Browser Polyfills
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
MDN
https://developer.mozilla.org/en-US/docs/Web/API/notification
https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API
Web APIs
https://developer.mozilla.org/en-US/docs/Web/API