Drag Drop Tools Using jquery ui

Question

I am trying to create a web editor. Basically I have a page consisting of a toolbar (draggable divs with background images representing HTML elements) and a drop zone a (large div). Users can create html elements on the page by by dragging a div from toolbar into the drop zone.

If a div from the toolbar is dropped into the drop zone, the markup for the element represented by the background image of that div is created, and a unique ID will be created for it as well. Then they are sent to a web service to be written to the page.

Right now I am facing a big hurdle; I can't make any modifications to the newly created elements. For instance the elements can be given colors when they are dropped but those colors can't be changed afterward. Also I've found that their IDs are the same as the divs from toolbar not the unique IDs that were created for them. Please Help me change the elements colors and add an ID to each of them.

you will have to use dynamic binding in order to achieve this here is a useful link http://stackoverflow.com/questions/17820401/bind-event-to-element-using-pure-javascript — valar morghulis, Apr 17 '15 at 09:19

score 0 · Answer 1 · answered Apr 17 '15 at 12:07

0

Use jquery-form-builder-plugin Its a nice example to create control and drag drop .. also you can create modification after draggin a control..

Sample link

answered Apr 17 '15 at 12:07

Anant Dabhi

10,864
3
31
49

Rathod Paresh · Answer 2 · 2017-01-19T13:04:57.193

You Can Try this as you want

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

Or also try this one for Drag and Drop

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

Drag Drop Tools Using jquery ui

2 Answers2