简易指定元素拖拽

最新推荐文章于 2023-09-24 16:51:46 发布

前端庸医

最新推荐文章于 2023-09-24 16:51:46 发布

阅读量169

点赞数

分类专栏： javascript效果

本文链接：https://blog.csdn.net/m9365859/article/details/51918185

版权

本文介绍了如何使用JavaScript实现网页中指定元素的拖放功能，包括鼠标按下、移动和释放等事件处理，以及元素位置更新的逻辑。通过实例代码详细解析了拖放操作的实现步骤，帮助开发者创建交互式的用户界面。

摘要由CSDN通过智能技术生成

<div class="dragable" id="content1">
		<p>我是拖曳示例DIV1.</p>
		<p>可以试验一下效果.</p>
	</div>
	<div class="dragable" id="content2">
		<p>我是拖曳示例DIV2.</p>
		<p>可以试验一下效果.</p>
	</div>

#content1,#content2 {background-color:#999;border:solid;}

<script type="text/javascript">
		var dragElement;
		var level = 1;
		var eventX;
		var eventY;
		var divX;
		var divY;
		window.οnlοad=function(){
			dragInit(document,'dragable');
			document.οnmοusemοve=move;
			document.οnmοuseup=out;
		}
		function dragInit(node,className){
			if(node.className==className){
				node.style.position = "relative";
  				node.style.left = "0px&#