<html>
<head>
<meta name="referrer" content="no-referrer">
</head>
<body>
<div class="left">
<img src="https://pic.cnblogs.com/avatar/1549846/20191126100502.png"
alt="加载失败" class="ico"/>
</div>
<div class="content">content</div>
</body>
<script type="text/javascript">
const draggable = document.querySelector('.ico');
draggable.addEventListener('dragstart', ondragstart);
draggable.addEventListener('dragend', ondragend);
const droppable = document.querySelector('.content');
droppable.addEventListener('dragenter', ondragenter);
droppable.addEventListener('dragover', ondragover);
droppable.addEventListener('dragleave', ondragleave);
droppable.addEventListener('drop', ondrop);
let toDrag = false;
function ondragstart(e){
console.log('ondragstart');
toDrag = true;
}
function ondragend(e) {
console.log('ondragend');
toDrag = false;
}
function ondragenter(e) {
e.preventDefault();
}
function ondragover(e) {
e.preventDefault();
}
function ondragleave(e) {
console.log('ondragleave');
}
function ondrop(e) {
if(!toDrag){
return;
}
console.log('ondrop');
let newImg = document.createElement("img");
newImg.src = draggable.src;
newImg.style.position = "absolute";
newImg.style.left = e.offsetX;
newImg.style.top = e.offsetY;
newImg.draggable = "false";
droppable.append(newImg);
}
</script>
<style type="text/css">
.left {
position: absolute;
left: 0;
width: 15%;
height: 100%;
background: #aaa;
}
.content {
position: absolute;
left: 15%;
width: 75%;
height: 100%;
background: #a0a;
}
</style>
</html>
