非洲大地,嘛也不服"/>
css3实践拖拽小案例,平头哥表示非洲大地,嘛也不服
效果展示:
图片资源:
源码展示:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#trashCan {width: 500px;height: 450px;border: 1px solid #000;margin: 40px auto;}#box{text-align:center;margin-right: 20px;}#box>img{margin-left: 20px;}</style>
</head>
<body>
<div id="trashCan"></div>
<div id="box"><img src="image/tuo1.bmp" alt="" width="100"><img src="image/tuo2.bmp" alt="" width="100"><img src="image/tuo3.bmp" alt="" width="100"><img src="image/tuo4.bmp" alt="" width="100">
</div><script>var mtrashCan = document.querySelector("#trashCan");var mimgs = document.querySelectorAll("img");var img = null;for(var i = 0 ;i<mimgs.length;i++){ //循环遍历img,为每一个img添加源元素开始拖拽的时候执行的方法mimgs[i].ondragstart = function () {//获取拖拽的是哪个imgimg= this;}}// 进入目标区域,在区域内拖动时触发的时间mtrashCan.ondragover = function (e) {//改变背景颜色this.style.backgroundColor = "#ccc";//放大图片img.style.width="200px";//设置图片左右间距img.style.marginLeft="30px";//设置图片上下间距img.style.marginTop="20px";//清除浏览器默认事件,组织默认事件对ondragleave事件带来的影响e.preventDefault();}//移出时改变背景色mtrashCan.ondragleave = function () {this.style.backgroundColor = "#fff";}// 拖动源元素到目标元素内的事件mtrashCan.ondrop = function () {//拖拽的是那个源元素,就把那个放到目标元素中this.appendChild(img);}
</script>
</body>
</html>
更多推荐
css3实践拖拽小案例,平头哥表示非洲大地,嘛也不服
发布评论