提问者:小点点

编辑,拖放网页上的框并保存内容和位置


我正在寻找一个起点,如何实现一个简单的网页拖放框。这些框应该是可编辑的(文本内容或一些html/图像上传功能)。

网站的任何访问者都应该能够移动方框,更改内容,然后保存结果(或者理想情况下,他们甚至不需要单击保存按钮)。

我应该从哪里开始实现这一目标?我设想的最难的部分是如何“保存”到服务器,然后服务于页面的编辑版本?我不知道如何使用SQL,对服务器端脚本的了解有限。

我不是在这里寻找一个完整的解决方案,只是一些指针请!

非常感谢。


共1个答案

匿名用户

我只是为您提供了一个模板。下面的代码将允许您移动div并编辑文本。

var makeMove;
		x0=0;
		y0=0;
		function move(e){
			if(makeMove){
				x1 = e.clientX;
				y1 = e.clientY;
				cx=x0+x1-x;
				cy=y0+y1-y;
				
				document.getElementById("dragableForm").style.left = cx +"px";
				document.getElementById("dragableForm").style.top = cy +"px";
				e.preventDefault();
			}
		}
		function mouseUp(e){
			makeMove=false;
			x0=cx;
			y0=cy;
		}
		function mouseDown(e){
			makeMove=true;
			x = e.clientX;
			y = e.clientY;
		}
.container{
			width: 600px;
			height: 500px;
			border: 1px solid black;
			overflow: hidden;
		}
		#dragableForm{
			border:1px solid black;
			position:relative;
		}
<body>
	<div class="container" onmousemove="move(event)" onmouseup="mouseUp(event)" onmousedown="mouseDown(event)">
		<div id="dragableForm" style="background-color: #00ff00;padding:10px;width:70%">
			<textarea  rows="4" cols="50">
				your input here
			</textarea>
			<button>save</button>
		</div>
	</div>
</body>