css实现鼠标点击拖拽效果

Lorem ipsum dolor sit amet consectetur?

源码

<div class="gbox">
	<div class="g-container">
		<div class="g-resize"></div>
		<div contenteditable="true" class="g-content"> Lorem ipsum dolor sit amet consectetur?</div>
	</div>
</div>

<style>
	.gbox{
		position: relative;
		width: 100%;
		height: 400px;
		background-color: antiquewhite;
		overflow: hidden;
	}
	.g-container {
		position: absolute;
		display: inline-block;
	}
	.g-resize {
		content: "";
		position: relative;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: none;
		resize: both;
		overflow: scroll;
		z-index: 1;
		scrollbar-width:none;
	}
	.g-resize::-webkit-scrollbar {
		background:transparent;
		background-color:transparent;
		box-shadow:none;
		border:none;
	}
	.g-resize::-webkit-resizer {
		background-color: transparent;
	}
	.g-content {
		position: absolute;
		bottom: -160px;
		right: -180px;
		background-image: linear-gradient(160deg,rgb(255, 222, 30) 50%,rgb(255, 250, 80));
		width: 200px;
		height: 180px;
		pointer-event: none;
		text-align: center;
		font-family: "marker felt", "comic sans ms", sans-serif;
		font-size: 24px;
		line-height: 1.3;
		padding: 1em;
		box-sizing: border-box;
	}
	.g-content:before {
		content: "";
		position: absolute;
		width: 17px;
		height: 17px;
		top: 3px;
		left: 3px;
		background: #fff;
	}
</style>

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/course/33_1628