mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-09-08 00:38:39 +09:00
101 lines
2.5 KiB
HTML
101 lines
2.5 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<meta charset='utf-8'>
|
|||
|
|
<title>drag & drop – events should not fire with non-draggable elements – 002</title>
|
|||
|
|
<style type="text/css">
|
|||
|
|
div {
|
|||
|
|
height: 200px;
|
|||
|
|
width: 200px;
|
|||
|
|
background-color: orange;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 8px;
|
|||
|
|
left: 8px;
|
|||
|
|
}
|
|||
|
|
div + div {
|
|||
|
|
background-color: navy;
|
|||
|
|
left: 250px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div + p {
|
|||
|
|
margin-top: 220px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
window.onload = function() {
|
|||
|
|
|
|||
|
|
var orange = document.getElementsByTagName('div')[0];
|
|||
|
|
var blue = document.getElementsByTagName('div')[1];
|
|||
|
|
var body = document.body;
|
|||
|
|
|
|||
|
|
var pass = true;
|
|||
|
|
|
|||
|
|
function fail() {
|
|||
|
|
pass = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.addEventListener('drag',fail,false);
|
|||
|
|
body.addEventListener('dragend',fail,false);
|
|||
|
|
body.addEventListener('dragenter',fail,false);
|
|||
|
|
body.addEventListener('dragleave',fail,false);
|
|||
|
|
body.addEventListener('dragover',fail,false);
|
|||
|
|
body.addEventListener('dragstart',fail,false);
|
|||
|
|
body.addEventListener('drop',fail,false);
|
|||
|
|
|
|||
|
|
body.ondrag = fail;
|
|||
|
|
body.ondragend = fail;
|
|||
|
|
body.ondragenter = fail;
|
|||
|
|
body.ondragleave = fail;
|
|||
|
|
body.ondragover = fail;
|
|||
|
|
body.ondragstart = fail;
|
|||
|
|
body.ondrop = fail;
|
|||
|
|
|
|||
|
|
orange.addEventListener('drag',fail,false);
|
|||
|
|
orange.addEventListener('dragend',fail,false);
|
|||
|
|
orange.addEventListener('dragenter',fail,false);
|
|||
|
|
orange.addEventListener('dragleave',fail,false);
|
|||
|
|
orange.addEventListener('dragover',fail,false);
|
|||
|
|
orange.addEventListener('dragstart',fail,false);
|
|||
|
|
orange.addEventListener('drop',fail,false);
|
|||
|
|
|
|||
|
|
orange.ondrag = fail;
|
|||
|
|
orange.ondragend = fail;
|
|||
|
|
orange.ondragenter = fail;
|
|||
|
|
orange.ondragleave = fail;
|
|||
|
|
orange.ondragover = fail;
|
|||
|
|
orange.ondragstart = fail;
|
|||
|
|
orange.ondrop = fail;
|
|||
|
|
|
|||
|
|
blue.addEventListener('drag',fail,false);
|
|||
|
|
blue.addEventListener('dragend',fail,false);
|
|||
|
|
blue.addEventListener('dragenter',fail,false);
|
|||
|
|
blue.addEventListener('dragleave',fail,false);
|
|||
|
|
blue.addEventListener('dragover',fail,false);
|
|||
|
|
blue.addEventListener('dragstart',fail,false);
|
|||
|
|
blue.addEventListener('drop',fail,false);
|
|||
|
|
|
|||
|
|
blue.ondrag = fail;
|
|||
|
|
blue.ondragend = fail;
|
|||
|
|
blue.ondragenter = fail;
|
|||
|
|
blue.ondragleave = fail;
|
|||
|
|
blue.ondragover = fail;
|
|||
|
|
blue.ondragstart = fail;
|
|||
|
|
blue.ondrop = fail;
|
|||
|
|
|
|||
|
|
body.onmouseup = function () {
|
|||
|
|
setTimeout(function () {
|
|||
|
|
if (pass == true) {
|
|||
|
|
document.body.innerHTML = 'PASS';
|
|||
|
|
} else {
|
|||
|
|
document.body.innerHTML = 'FAIL';
|
|||
|
|
}
|
|||
|
|
}, 100 );
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<div></div>
|
|||
|
|
<div></div>
|
|||
|
|
|
|||
|
|
<p>Use your pointing device to drag from the orange box to the blue box. The
|
|||
|
|
word "PASS" should appear.
|