html-drag
/
example.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<Meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<Meta http-equiv="Pragma" content="no-cache" />
	<Meta http-equiv="Expires" content="0" />
	<title>html-drag示例</title>
	<script src="./dist/html-drag.min.js"></script>
	<style>
		html,
		body {
			height: 100%;
			width: 100%;
			margin: 0;
			overscroll-behavior-y: contain;
		}

		.parent-container {
			height: 50%;
			width: 50%;
			position: absolute;
			border: 10px solid rgba(55, 73, 94);
			background-color: rgb(65, 184, 131);
			padding: 5px;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.panel {
			height: 50%;
			width: 50%;
			border: 5px solid rgb(89, 156, 218);
			background-color: rgba(241, 241, 241, 0.8);
			transform: translate(10%, 20%);
			position: absolute;
		}

		.panel-header {
			background-color: rgba(255, 255, 255, 0.8);
			height: 40px;
		}

		.outter-panel {
			left: 50%;
			width: 150px;
			height: 100px;
		}

		.drag-end-scale {
    	animation: scale-anim .8s linear forwards;
		}

		.btns {
			position: absolute;
			top: 0;
			display: flex;
			flex-direction: row;
		}

		@keyframes scale-anim {
			from {
				opacity: 0.8;
				transform: scale(1);
			}
			to {
				opacity: 1;
				transform: scale(0.6);
			}
		}
	</style>
</head>

<body>
	<div class="parent-container">
		<div id="Panel" class="panel">
			<div id="PanelHeader" class="panel-header">在容器内拖动</div>
			<div>content</div>
		</div>
	</div>
	<div class="outter-panel panel">
		<div class="panel-header">拖动并复制到容器</div>
		<div>content</div>
	</div>
	<div class="btns">
		<button onclick="dragHtml()">清除html拖动</button>
		<button onclick="dragTip()">清除html2拖动</button>
	</div>

	<script>
		const Panel = document.getElementById('Panel')
		const Header = document.getElementById('PanelHeader')
		const Panel2 = document.getElementsByClassName('outter-panel')[0]
		const Header2 = Panel2.children[0]

		/**
		 * 在容器内拖动窗体
		 **/
		const dragHtml = Dragger.dragHtml({
			// 拖拽的锚点
			anchorTarget: Header,
			// 拖拽时移动的元素
			draggedTarget: Panel,
			// 锚点的鼠标样式(可选配置，默认值为'default')
			anchorCursorStyle: 'move',
			// 拖拽时的鼠标样式(可选配置，默认值为'default')
			cursorStyle: 'move',
			// 坐标轴限制, 当为'x', 'y', 'xy'时，限制在该轴上拖动
			limitAxis: '',
			// 是否开启父容器的边界限制（可选配置，默认值为true）
			isOpenBoundary: true,
			// 是否支持触屏操作（可选配置，默认值为true）
			isOpenTouch: true,
			// 是否在捕获阶段执行鼠标移动和弹起事件,开启后事件不会向下传递,默认为false
			// 当鼠标移动受其他元素影响时,设置为true
  		isUseCapture: false,
			// 拖动开始时的回调函数（可选配置）
			onDragStart: () => {
				console.log('drag start!')
			},
			// 拖动时的回调函数（可选配置）
			onDrag: (left, top, dx, dy) => {
				console.log('dragging', left, top, dx, dy)
			},
			// 拖动结束时的回调函数（可选配置）
			onDragEnd: () => {
				console.log('drag end!')
			}
		})

		/**
		 * 将外部窗体拖动并复制至容器内
		 **/
		let newPanel = null
		const dragTipOpt = {
			anchorTarget: Header2,
			draggedTarget: Panel2,
			anchorCursorStyle: 'move',
			cursorStyle: 'move',
			limitAxis: '',
			isOpenBoundary: true,
			isOpenTouch: true,
			isUseCapture: false,
			onDragStart: () => {
				// 复制Point节点
				newPanel = dragTipOpt.draggedTarget.cloneNode(true)
				newPanel.style.backgroundColor = '#ffc107'
				newPanel.style.opacity = '0.8'
				document.body.appendChild(newPanel)
				// 隐藏之前的窗体
				Panel2.style.display = 'none'
				// 将拖动目标设置为新复制的元素
				dragTipOpt.draggedTarget = newPanel
				// 设置新的拖动锚点
				dragTipOpt.anchorTarget = newPanel.children[0]
			},
			onDrag: (left, top, dx, dy) => {
				// 显示标签位置和拖动距离XY
				dragTipOpt.anchorTarget.textContent = `left:${left}, top:${top}\n dx:${dx}, dy:${dy}`
			},
			onDragEnd: () => {
				// 判断拖动后的点元素是否在panel的容器中，如果在则将dom元素移动至该节点，如果不在则删除
				const container = document.getElementsByClassName('parent-container')[0]
				const containerRect = container.getBoundingClientRect()
				const newPanelRect = newPanel.getBoundingClientRect()
				if (newPanelRect.left >= containerRect.left
				&& newPanelRect.left <= containerRect.left + containerRect.width
				&& newPanelRect.top >= containerRect.top
				&& newPanelRect.top <= containerRect.top + containerRect.height) {
					// 移入容器后由于offsetParent发生变化，因此需要调整left、top的值
					newPanel.style.top = newPanelRect.top - containerRect.top - (containerRect.height - container.clientHeight) / 2 + 'px'
					newPanel.style.left = newPanelRect.left - containerRect.left  - (containerRect.width - container.clientWidth) / 2 + 'px'
					container.appendChild(newPanel)
					// 添加拖动完成的动画效果
					newPanel.style.removeProperty('opacity')
					newPanel.classList.add('drag-end-scale')
					// 清除锚点的鼠标样式
					dragTipOpt.anchorTarget.style.removeProperty('cursor')
					dragTipOpt.anchorTarget.textContent = '一个新的标签'
					console.log('新的元素创建完成！')
				} else {
					newPanel.remove()
				}
				// 显示之前的窗体
				Panel2.style.removeProperty('display')
				// 恢复拖拽的源目标
				dragTipOpt.draggedTarget = Panel2
				dragTipOpt.anchorTarget = Header2
			}
		}
		const dragTip = Dragger.dragHtml(dragTipOpt)
	</script>
	<!-- 页面访问量统计 -->
	<script src="http://roman_123.gitee.io/static/js/visit-statistics.js"></script>
</body>

</html>