Daily small functions-drag and drop of CSS3
As shown:
code show as below:
<body>
<div class="demo1">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="demo2"></div>
<script>
var target1;
//添加其拖拽事件的函数
var li = document.getElementsByTagName('li');
for (var i = 0; i < li.length; i++) {
li[i].setAttribute("draggable", true);
li[i].ondragstart = function (e) {
target1 = e.target;
console.log(e.target)
}
}
var demo2 = document.getElementsByClassName('demo2')[0];
demo2.ondragover = function (e) {
e.preventDefault()
}
demo2.ondrop = function(e){
demo2.appendChild(target1)
target1= null
}
var demo1 = document.getElementsByClassName('demo1')[0];
demo1.ondragover = function (e) {
e.preventDefault()
}
demo1.ondrop = function(e){
demo1.appendChild(target1)
target1= null
}
</script>
</body>
The CSS code is as follows:
* {
margin: 0px;
padding: 0px;
}
.demo1 {
position: absolute;
width: 100px;
height: auto;
border: 1px solid;
padding-bottom: 50px;
}
.demo2 {
position: absolute;
width: 100px;
height: auto;
border: 1px solid;
padding-bottom: 50px;
left: 500px;
}
li {
width: 50px;
height: 10px;
background-color: cadetblue;
line-height: 10px;
margin: 10px auto;
list-style: none;
padding-bottom: 10px;
}
Summary: When
ondrop is used, the default event of ondragover must be cleared. You
can use e.target to query the drag target.