Question

我正在寻找一个关于如何使用拖放框来实现简单网页的起点。这些框应该是可编辑的（文本内容或某些html /图像上传功能）。

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

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

我不是在寻找完整的解决方案，只需要一些指示！

谢谢。

Answer 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>

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

1 个答案: