可拖拽div

最新推荐文章于 2024-05-15 17:05:01 发布

xujhui

最新推荐文章于 2024-05-15 17:05:01 发布

阅读量253

点赞数

本文链接：https://blog.csdn.net/JontyXu/article/details/130027832

版权

html:

<div class="container">拖动</div>

css:

.container {
	padding: 0.2rem;
	background: #409EFF;
	display: inline-block;
	position: absolute;
	left: 100px;
	top: 200px;
	height: 100px;
	width: 200px;
	text-align: center;
	color: #fff;
}

一、简单拖拽

1.效果

2.JS代码

function drag(e) {
	const oldStyle = window.getComputedStyle(container),
	left = parseFloat(oldStyle.left),
	top = parseFloat(oldStyle.top)
	container.style.left = `${left + e.movementX}px`
	container.style.top = `${top + e.movementY}px`
	document.addEventListener('mouseup', function() {
		document.removeEventListener('mousemove', drag)
		document.removeEventListener('mouseup', arguments.callee)
	})
}
const container = document.querySelector('.container')
container.addEventListener('mousedown', () => {
	document.addEventListener('mousemove', drag)
})

二、边界限制拖拽

解决当容器拖拽超出边界时会产生滚动条问题。

1.效果

2.JS代码

function drag(e) {
	const padding = 10,
	oldStyle = window.getComputedStyle(container),
	left = parseFloat(oldStyle.left),
	top = parseFloat(oldStyle.top),
	width = container.clientWidth,
	height = container.clientHeight,
	temLeft = left + e.movementX,
	temTop = top + e.movementY,
	clientWidth = document.documentElement.clientWidth,
	clientHeight = document.documentElement.clientHeight,
	maxLeft = clientWidth - width - padding,
	maxTop = clientHeight - height - padding,
	newLeft = temLeft < padding ? padding : temLeft > maxLeft ? maxLeft : temLeft, 
	newTop = temTop < padding ? padding : temTop > maxTop ? maxTop : temTop
	container.style.left = `${newLeft}px`
	container.style.top = `${newTop}px`
	container.setAttribute('move', '')
	document.addEventListener('mouseup', function() {
		container.removeAttribute('move')
		document.removeEventListener('mousemove', drag)
		document.removeEventListener('mouseup', arguments.callee)
	})
}
const container = document.querySelector('.container')
container.addEventListener('mousedown', () => {
	document.addEventListener('mousemove', drag)
})

三、吸附拖拽

松开鼠标后自动根据最近距离吸附左右侧

1.效果

2.代码

css:

.container {
	padding: 0.2rem;
	background: #409EFF;
	display: inline-block;
	position: absolute;
	left: 100px;
	top: 200px;
	height: 100px;
	width: 200px;
	text-align: center;
	color: #fff;
}
.container:hover {
	cursor: move;
}
.container[move] {
	border-radius: 10px;
	background-color: #67C23A;
}
.container[up] {
	transition: left 1s;
}

js:

function drag(e) {
	const padding = 10,
	oldStyle = window.getComputedStyle(container),
	left = parseFloat(oldStyle.left),
	top = parseFloat(oldStyle.top),
	width = container.clientWidth,
	height = container.clientHeight,
	temLeft = left + e.movementX,
	temTop = top + e.movementY,
	clientWidth = document.documentElement.clientWidth,
	clientHeight = document.documentElement.clientHeight,
	maxLeft = clientWidth - width - padding,
	maxTop = clientHeight - height - padding,
	newLeft = temLeft < padding ? padding : temLeft > maxLeft ? maxLeft : temLeft, 
	newTop = temTop < padding ? padding : temTop > maxTop ? maxTop : temTop
	container.style.left = `${newLeft}px`
	container.style.top = `${newTop}px`
	container.setAttribute('move', '')
	document.addEventListener('mouseup', function() {
		container.setAttribute('up', '')
		container.style.left = `${newLeft < (clientWidth - width) / 2 ? padding : maxLeft}px`
		container.removeAttribute('move')
		document.removeEventListener('mousemove', drag)
		document.removeEventListener('mouseup', arguments.callee)
	})
}
const container = document.querySelector('.container')
container.addEventListener('mousedown', () => {
	container.removeAttribute('up')
	document.addEventListener('mousemove', drag)
})