拖放工具使用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

回答

相關問題