我正在寻找一个起点,如何实现一个简单的网页拖放框。这些框应该是可编辑的(文本内容或一些html/图像上传功能)。
网站的任何访问者都应该能够移动方框,更改内容,然后保存结果(或者理想情况下,他们甚至不需要单击保存按钮)。
我应该从哪里开始实现这一目标?我设想的最难的部分是如何“保存”到服务器,然后服务于页面的编辑版本?我不知道如何使用SQL,对服务器端脚本的了解有限。
我不是在这里寻找一个完整的解决方案,只是一些指针请!
非常感谢。
我只是为您提供了一个模板。下面的代码将允许您移动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>