Drag Drop Tools Использование jquery ui

Я пытаюсь создать веб-редактор. В основном у меня есть страница, состоящая из панели инструментов (перетаскиваемые divs с фоновыми изображениями, представляющими элементы HTML) и зоны переадресации a (большой div). Пользователи могут создавать элементы html на странице, перетаскивая div из панели инструментов в зону перетаскивания.Drag Drop Tools Использование jquery ui

Если div из панели инструментов выпадает в зону выпадения, создается разметка для элемента, представленного фоновым изображением этого div, и для него будет создан уникальный идентификатор. Затем они отправляются на веб-службу для записи на страницу.

Прямо сейчас я столкнулся с большим препятствием; Я не могу вносить никаких изменений в вновь созданные элементы. Например, элементам можно присваивать цвета при их удалении, но после этого цвета не могут быть изменены. Также я обнаружил, что их идентификаторы те же, что и divs из панели инструментов, а не уникальные идентификаторы, которые были созданы для них. Пожалуйста, помогите мне изменить цвета элементов и добавить идентификатор к каждому из них.

источник

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

Drag Drop Tools Использование jquery ui

ответ

Смежные вопросы