拖放工具使用jquery ui

我想创建一个web编辑器。基本上我有一个页面组成的工具栏（可拖动div与背景图像代表HTML元素）和拖放区（大div）。用户可以通过将工具栏上的div拖放到放置区域来在页面上创建html元素。拖放工具使用jquery ui

如果将工具栏上的div放入拖放区域，则创建该div背景图像表示的元素的标记，并为其创建唯一ID。然后将它们发送到Web服务以写入页面。

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

来源

2015-04-17 EternalCuriosity

你将不得不使用动态绑定为了实现这个这里是一个有用的链接http://stackoverflow.com/questions/17820401/bind-event-to-element-using-pure-javascript –

使用jquery-form-builder-plugin它的一个很好的例子，以创建控制和拖放.. 也可以draggin控制后，创建修改..

Sample link

来源

2015-04-17 12:07:03

你可以试试这个，只要你想

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

来源

2017-01-19 12:41:33

拖放工具使用jquery ui

回答

相关问题