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 stackoverflow.com/questions/17820401/… — Sahil Sharma
– Sahil Sharma, Commented Apr 17, 2015 at 9:19

Anant Dabhi · Accepted Answer · 2015-04-17 12:07:03Z

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, 2015 at 12:07

Anant Dabhi

11.2k3 gold badges33 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rathod Paresh · Accepted Answer · 2017-01-19 13:04:57Z

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>

Collectives™ on Stack Overflow

Drag Drop Tools Using jquery ui

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related