文件丢进垃圾桶(拖拽)

拖拽练习

  • 通过事件监听来实现拖拽效果
  • 把垃圾文件丢进垃圾桶@_@
  • 代码演示
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .file {
	    position: absolute;
	    left: 300px;
	    top: 300px;
	    width: 100px;
	    height: 100px;
	    background-color: pink;
	}
	.trash-can {
	    width: 150px;
	    height: 200px;
	    background-color: grey;
	    font-size: 22px;
	}
    </style>
</head>
<body>
    <div class="file">垃圾文件</div>
    <div class="trash-can">垃圾桶</div>

<script>
	
    const file = document.querySelector('.file')
    const trashCan = document.querySelector('.trash-can')
	
    file.addEventListener('mousedown', (e) => {
        //按下时获取此时相对鼠标的偏移量
	let remainLeft = e.pageX - file.offsetLeft
	let remainTop = e.pageY - file.offsetTop
		
	//监听鼠标移动以及松开
	window.addEventListener('mousemove', a)
	file.addEventListener('mouseup', b)
		
	function a(e) {
	    file.style.left = e.pageX - remainLeft + 'px'
	    file.style.top = e.pageY - remainTop + 'px'
	}
		
        function b(e) {
	    if (parseFloat(file.style.left) <= 150 && parseFloat(file.style.top) <= 200) {
		file.parentNode.removeChild(file)
	    } else {
		file.style.left = e.pageX - remainLeft + 'px'
		file.style.top = e.pageY - remainTop + 'px'
	    }
	    //清除监听
	    window.removeEventListener('mousemove', a)
	    file.removeEventListener('mouseup', b)
	}
	//清除默认样式
	e.preventDefault()
    })
	
    /* 由此小案例来加深知识点:
      * 通过addEventListener监听的事件及其回调函数只能被removeEventListener清除
      * removeEventListener(enent, fn) 俩参数是必须传的
      * 执行的回调函数fn不能是匿名函数,否则清除无效
    */
	
</script>

上一篇:JavaScript学习——事件处理程序


下一篇:浏览器拖动API全解析