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

Question

I am looking for a starting point as to how to achieve a simple webpage with drag and drop boxes. 我正在寻找关于如何使用拖放框实现简单网页的起点。 The boxes should be editable (either text content or some html/image upload functionality). 这些框应可编辑（文本内容或某些html /图像上传功能）。

Any visitor to the site should be able to move boxes around, change the contents and then save the results (or ideally they don't even need to click a save button). 该网站的任何访问者都应该能够四处移动框，更改内容，然后保存结果（或者理想情况下，他们甚至不需要单击保存按钮）。

Where should I be starting to achieve this? 我应该从哪里开始实现这一目标？ The hardest part I envisage is how to 'save' to the server and then serve the edited version of the page? 我设想的最困难的部分是如何“保存”到服务器，然后提供页面的编辑版本？ I don't know how to use SQL, and have limited knowledge of server side script. 我不知道如何使用SQL，并且对服务器端脚本的了解有限。

I am not looking for a full solution here, just some pointers please! 我不是在这里寻找完整的解决方案，请提供一些建议！

Thank you. 谢谢。

Answer 1

I am just providing you the template to start with. 我只是为您提供模板。 Below code will allow you to move div and also edit text. 下面的代码将允许您移动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 个解决方案

解决方案1
1 已采纳 2017-06-30 18:22:34

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-06-30 18:22:34

解决方案1
1 已采纳 2017-06-30 18:22:34