<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>drag</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
width: 150px;
}
.content {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 将要被拖动的元素 -->
<img src="../03_音视频/media/01.jpg">
<img src="../03_音视频/media/02.jpg">
<img src="../03_音视频/media/03.jpg">
<!-- 放置被拖动元素的容器 -->
<div class="content" ></div>
<script type="text/javascript" src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
// 原生js
var imgs = document.querySelectorAll('img');
var content = document.querySelector('.content');
var aim;
for (var i = 0; i < imgs.length; i++) {
imgs[i].ondragstart = function(e) {
console.log(this);
console.log(e.target);
aim = e.target;
}
}
//默认情况下,数据/元素不能在其他元素中拖放,对drop必须组织元素的默认处理
content.ondragover = function() {
event.preventDefault();
}
content.ondrop = function() {
content.appendChild(aim);
}
</script>
</body>
</html> 上述运行结果：
38
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
