mirror of
https://github.com/servo/servo
synced 2026-04-29 10:57:43 +02:00
55 lines
1.4 KiB
HTML
55 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<title>drag & drop - dragging objects inside draggable elements</title>
|
|
<style>
|
|
body > div {
|
|
height: 200px;
|
|
width: 200px;
|
|
background-color: blue;
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 8px;
|
|
}
|
|
body > div + div {
|
|
background-color: fuchsia;
|
|
left: 258px;
|
|
}
|
|
object {
|
|
border: 5px solid yellow;
|
|
height: 130px;
|
|
width: 130px;
|
|
position: absolute;
|
|
top: 30px;
|
|
left: 30px;
|
|
}
|
|
p:first-of-type {
|
|
margin-top: 220px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
|
|
window.onload = function() {
|
|
var orange = document.getElementsByTagName('div')[0], fuchsia = document.getElementsByTagName('div')[1];
|
|
|
|
orange.ondragstart = function(e) {
|
|
e.dataTransfer.effectAllowed = 'copy';
|
|
e.dataTransfer.setData('text/plain', 'FAIL');
|
|
};
|
|
fuchsia.ondragenter = fuchsia.ondragover = function(e) {
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = 'copy';
|
|
};
|
|
fuchsia.ondrop = function(e) {
|
|
e.preventDefault();
|
|
document.getElementsByTagName('p')[0].innerHTML = 'FAIL';
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
<div draggable='true'><object data="about:blank"></object></div><div></div>
|
|
|
|
<p>Use your pointing device to begin dragging inside the yellow border (not on any scrollbars that may appear), over to the pink box, then release it. Pass if nothing is dragged, and if this text does not change.</p>
|
|
<noscript><p>Enable JavaScript and reload</p></noscript>
|