鼠标拖拽文件到指定区域
2017-10-24 本文已影响0人
星球小霸王
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> -->
<style>
.content{
width: 1200px;
overflow:hidden;
margin:0 auto;
}
.left{
float:left;
width: 600px;
height: 600px;
background:gray;
}
.right{
float:right;
width: 600px;
height: 600px;
background:lightgray;
}
.draglist{
float:left;
width: 280px;
height: 100px;
line-height:100px;
text-align:center;
font-size:28px;
font-weight:bold;
color:#999;
margin:10px;
background:lightcoral;
cursor:move;
}
.item{
float:left;
width: 280px;
height: 100px;
line-height:100px;
text-align:center;
font-size:50px;
font-weight:bold;
color:#999;
margin:10px;
background:lightgoldenrodyellow;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<div class="draglist" draggable="true">被拖动的块一</div>
<div class="draglist" draggable="true">被拖动的块二</div>
<div class="draglist" draggable="true">被拖动的块三</div>
<div class="draglist" draggable="true">被拖动的块四</div>
</div>
<div class="right">
<div class="item">方块1</div>
<div class="item">方块2</div>
<div class="item">方块3</div>
<div class="item">方块4</div>
<div class="item">方块5</div>
<div class="item">方块6</div>
</div>
</div>
<script>
function $(el){
return document.querySelectorAll(el)
}
var el = null;
var curEle = null;
var draglist = $(".draglist")
for(var i=0;i<draglist.length;i++){
draglist[i].ondragstart = function(e){
e.dataTransfer.effectAllowed = 'move'
el = e.target;
}
}
$(".right")[0].ondragover = function(e){
e.preventDefault();
}
$(".right")[0].ondragenter = function(e){
curEle = e.target;
if(curEle.className == "item"){
curEle.style.backgroundColor = "green"
}
}
$(".right")[0].ondragleave = function(e){
leaveEle = e.target;
if(leaveEle.className == "item"){
leaveEle.style.backgroundColor = "lightgoldenrodyellow"
}
}
$(".right")[0].ondrop = function(e){
if(curEle.className == "item"){
curEle.parentNode.insertBefore(el,curEle)
curEle.style.backgroundColor = "lightgoldenrodyellow"
}
}
</script>
</body>
</html>
