HTML5 拖拽复制移动元素

最新推荐文章于 2024-07-09 18:30:24 发布

静静香甜

最新推荐文章于 2024-07-09 18:30:24 发布

阅读量1.2k

点赞数 2

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/qq_23663693/article/details/108150818

版权

html5 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
#copy,#move{
border: 1px solid #000;
width: 300px;
height: 200px;
}
#copyTarget,#moveTarget{
width: 300px;
height: 200px;
border: 1px solid #FF0000;
}
#newId{
width: 200px;
height: 50px;
border: 1px solid darkcyan;
}
</style>
</head>
<body>
<h2>使用拖拽实现移动和复制功能</h2>
<div draggable="true" id="copy">要复制的元素</div>
<div id="copyTarget"></div>
<div draggable="true" id="move">要移动的元素</div>
<div id="moveTarget"></div>
<script type="text/javascript">
window.onload = function() {
// 复制
$('copy').ondragstart = handler_dragstart;
$('copy').ondragend = handler_dragend;
$('copyTarget').ondragover = hander_dragover;
$('copyTarget').ondragleave = handler_dragLeave
$('copyTarget').ondrop = handler_drop;
// 移动
$('move').ondragstart = handler_dragstart;
$('move').ondragend = handler_dragend;
$('moveTarget').ondragover = hander_dragover;
$('moveTarget').ondragleave = handler_dragLeave
$('moveTarget').ondrop = handler_drop;
function handler_dragstart(event) {
console.log('拖拽开始');
// 设置数据
event.dataTransfer.setData('text/plain', event.target.id);
// 设置拖动效果设置既复制又移动
event.effectAllowed = 'copyMove';
}
function handler_dragend(event) {
// 拖动操作完成时清空设置的数据
// event.target.style.borderColor = 'black';
event.dataTransfer.clearData();
}
// 当被拖动元素在目标元素内时触发
function hander_dragover(event) {
event.target.style.background = 'lightblue';
event.preventDefault();
}
function handler_drop(event) {
event.preventDefault();
// 获取设置的数据
var id = event.dataTransfer.getData('text/plain');
if (id === 'copy' && event.target.id == 'copyTarget') {
var nodeCopy = document.getElementById(id).cloneNode(true);
nodeCopy.id = 'newId';
event.target.appendChild(nodeCopy);
}
if(id === 'move' && event.target.id == 'moveTarget'){
event.target.appendChild(document.getElementById(id));
console.log(event.target.children);
}
}
function handler_dragLeave(event) {
event.target.style.background = 'white';
event.preventDefault();
}
function $(ele) {
return document.getElementById(ele);
}
}
</script>
</body>
</html>

静静香甜

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录