使用jquery ui拖放工具

Question

我正在尝试创建一个Web编辑器。 基本上，我有一个页面，其中包含工具栏（可拖动的div，其中的背景图像表示HTML元素）和放置区域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 个解决方案

解决方案1
0 2015-04-17 12:07:03

解决方案2
0 2017-01-19 12:41:33

使用jquery ui拖放工具

问题描述

2 个解决方案

解决方案1 0 2015-04-17 12:07:03

解决方案2 0 2017-01-19 12:41:33

解决方案1
0 2015-04-17 12:07:03

解决方案2
0 2017-01-19 12:41:33