效果
参考教程:
W3school:
菜鸟教程:
关键知识点:
在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
实现
垃圾箱ul{
overflow:hidden;
}
li{
width:80px;
height: 50px;
line-height:50px;
border:1px solid #000;
margin:20px;
list-style:none;
float:left;
}
#out{
width:100px;
height: 150px;
background:url() 0 0 no-repeat;
margin:100px;
background-size:100%;
color:red;
border:4px solid #000;
text-align:center;
}
wi