Jquery Form Builder Help

Jquery Form Builder Help

Hi I am trying to create a form builder that is drag gable and sortablethe features I need are to highlight the drop zone once the control is on the area that is drop able.

To be able to set the required max length attributes and also to be able to portable I have it working in a crude way Except for the property inspector and was wanting advice or code samples.

In the below example I am using just li's which I am sure is not the way to go, as



  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5.  <meta charset="utf-8">
  6.  <title>jQuery UI Draggable + Sortable</title>
  7.  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  8.  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  9.  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  10.  <link rel="stylesheet" href="/resources/demos/style.css">
  11.  <style>
  12.  ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
  13.  li { margin: 5px; padding: 5px; width: 150px; }
  14.  </style>
  15.  <script>
  16.  $(function() {
  17. $( "#sortable" ).sortable({
  18.  revert: true
  19. });
  20. $( "#draggable" ).draggable({
  21.  connectToSortable: "#sortable",
  22.  helper: "clone",
  23.  revert: "invalid"
  24. });
  25. $( "ul, li" ).disableSelection();
  27. $( "#draggable2" ).draggable({
  28.  connectToSortable: "#sortable",
  29.  helper: "clone",
  30.  revert: "invalid"
  31. });
  32. $( "ul, li" ).disableSelection();
  33.  });
  34.  </script>
  35. </head>
  36. <body>
  37.  
  38. <div style="float:left;">
  39. <ul>
  40.  <li id="draggable" class="ui-state-highlight"><input type="text"  id="test">Text Box</li>
  41. </ul>
  42. <ul> 
  43. <li id="draggable2" class="ui-state-highlight">Radio Button</li>
  44. </ul>
  45. </div>
  46. <div style="float:left;">
  47. <ul id="sortable">
  48.  <li class="ui-state-default">Item 1</li>
  49.  <li class="ui-state-default">Item 2</li>
  50.  <li class="ui-state-default">Item 3</li>
  51.  <li class="ui-state-default">Item 4</li>
  52.  <li class="ui-state-default">Item 5</li>
  53. </ul>
  54. </div>
  55.  
  56.  
  57. </body>
  58. </html>