毎日の小さな機能-CSS3のドラッグアンドドロップ
図に示すように:
コードは次のように表示されます。
<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>
CSSコードは次のとおりです。
* {
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;
}
概要:
ondropを使用する場合、ondragoverのデフォルトイベントをクリアする必要があり
ます。e.targetを使用してドラッグターゲットをクエリできます。