Question

我正在尝试创建一个网页编辑器。基本上我有一个由工具栏组成的页面（带有代表HTML元素的背景图像的可拖动div）和一个放置区域a（大div）。用户可以通过将div从工具栏拖动到放置区域来在页面上创建html元素。

如果工具栏中的div被放入放置区，则会创建该div的背景图像所代表的元素的标记，并且还将为其创建唯一ID。然后将它们发送到Web服务以写入页面。

现在我面临一个很大的障碍;我不能对新创建的元素进行任何修改。例如，元素在被丢弃时可以被赋予颜色但是之后不能改变那些颜色。此外，我发现他们的ID与工具栏中的div相同，而不是为他们创建的唯一ID。请帮我改变元素颜色并为每个元素添加一个ID。

Answer 1

使用jquery-form-builder-plugin这是一个很好的例子来创建控件和拖放.. 您也可以在拖动控件后创建修改..

Answer 2

您可以根据需要尝试

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>A Simple Draggable Element</title>



<style>
#drag { width: 300px; height: 300px; background: red; }
</style>

<script type="text/javascript" src="./A Simple Draggable Element_files/jquery.min.js.download"></script>
<script type="text/javascript" src="./A Simple Draggable Element_files/jquery-ui.min.js.download"></script>
<script type="text/javascript">

$( init );

function init() {
  $('#drag').draggable();
}

</script>

</head>
<body style="cursor: auto;">

<div class="wideBox">
  <h1>Drag-and-Drop with jQuery</h1>
  <h2>A Simple Draggable Div</h2>
</div>

<div id="content" style="height: 400px;">

  <div id="drag" class="ui-draggable" style="position: relative; left: 124px; top: 23px;"> </div>

</div>

</body></html>

或者也可以尝试拖放

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
#div2 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the Tools:</p>

<div id="div1" draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<li id="drag1" draggable="true" ondragstart="drag(event)" ><input type="text" id="drag1" width="336" height="69"></li><br/>
<li id="drag2" draggable="true" ondragstart="drag(event)"><input type="text" id="drag2"   width="336" height="69"></li>
<div id="div2" draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>

使用jquery ui拖放工具

2 个答案: