<script src="jquery-1.5.min.js" type="text/javascript"></script> <script src="jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script> <style type="text/css"> .empty { } .item { background: gray; float: left; padding: 5px; margin: 5px; cursor: move; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5); box-shadow: 0 1px 2px rgba(0,0,0,.5); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; z-index: 5; } .item_container { width: 610px; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; } .icart, .icart label { cursor: e-resize; } .divrm { text-align: left; } .remove { text-decoration: none; cursor: pointer; font-weight: bold; font-size: 20px; position: relative; top: -7px; } .remove:hover { color: #999; } .clear { clear: both; } .divDragDropHeader { height: 50px; width: 100%; z-index: 0; cursor: e-resize; border: solid 1px gray; } .divDragDropData { height: 445px; width: 100%; position: relative; padding: 0 0 0 2px; z-index: 0; cursor: e-resize; border-width: 0 1px; } .back { background: #e9e9e9; } .drop-active { background: #ffff99; } .drop-hover { background: #ffff66; } #navigate { width: 500; margin: 0 auto; border: 1px solid gray; border-top-width: 0; -webkit-border-radius: 0 0 .5em .5em; -moz-border-radius: 0 0 .5em .5em; border-radius: 0 0 .5em .5em; padding: 10px; font-size: 14px; background: #333; font-weight: bold; } </style> <script type="text/javascript"> $(document).ready(function() { $("#aBAddClnBtn").click(function() { var new_div = "<div style='border: solid 1px gray; width: 15%; '><div style='border: solid 1px gray; height: 50px;'> </div> <div style='border: solid 1px gray; height: 445px;'> </div></div>"; $(new_div).css("float", "left").appendTo("#divContent"); return false; }); }); $(document).ready(function() { $(".item").draggable({ revert: true }); $(".divDragDropData").draggable({ axis: "x" }); $(".divDragDropData").droppable({ accept: ".item", activeClass: "drop-active", hoverClass: "drop-hover", drop: function(event, ui) { var item = ui.draggable.html(); var itemid = ui.draggable.attr("id"); var html = '<div class="icart">'; html = html + '<div class="divrm">'; html = html + '<a onclick="remove(this)" class="remove ' + itemid + '">×</a>'; html = html + '<div/>' + item + '</div>'; $(".divDragDropData").append(html); } }); $("#btn_clear").click(function() { $(".divDragDropData").fadeOut("2000", function() { $(this).html("").fadeIn("fast").css({ left: 0 }); }); return false; }); }); function remove(el) { $(el).hide(); $(el).parent().parent().effect("highlight", { color: "#ff0000" }, 1000); $(el).parent().parent().fadeOut('1000'); setTimeout(function() { $(el).parent().parent().remove(); }, 1100); } </script> </head> <body> <form id="form1" runat="server"> <div> <table width="100%" cellspacing="5"> <tr> <td style="width: 8%; height: 100%; vertical-align: top;"> <div id="divFormFields" class="item_container" style="width: 100%; background-color: gray;"> <div id="divFieldtitle"> Form Fields </div> <div id="divFieldDetails"> <div class="item" id="Empid"> EmpId </div> <div class="item" id="EmployeeName"> EmployeeName</div> <div class="item" id="JobTitle"> JobTitle</div> <div class="item" id="Division"> Division</div> <div class="item" id="Location"> Location</div> <div class="item" id="HireDate"> HireDate</div> <div class="item" id="PerformanceResults"> PerformanceResults</div> <div class="item" id="PerformanceBehaviour"> PerformanceBehaviour</div> <div class="item" id="MeritIncrement"> MeritIncrement</div> <div class="item" id="PromoJobTitle"> PromoJobTitle</div> <div class="item" id="PromoIncrement"> PromoIncrement</div> <%-- <ul> <li class="item" id='EmpId'><span>EmpId</span></li> <li class="item" id='EmployeeName'><span>EmployeeName</span></li> <li class="item" id='JobTitle'><span></span>JobTitle</li> <li class="item" id='Division'><span></span>Division</li> <li class="item" id='Location'><span></span>Location</li> <li class="item" id='HireDate'><span></span>HireDate</li> <li class="item" id='PerformanceResults'><span></span>PerformanceResults</li> <li class="item" id='PerformanceBehaviour'><span></span>PerformanceBehaviour</li> <li class="item" id='MeritIncrement'><span></span>MeritIncrement</li> <li class="item" id='PromoJobTitle'><span></span>PromoJobTitle</li> <li class="item" id='PromoIncrement'><span></span>PromoIncrement</li> <%-- <li id='label'><span>Label</span></li> <li id='input type="text"'><span>TextBox</span></li> <li id='select'><span>DropDownList</span></li> <li id='textarea'><span>Textarea</span></li> <li id='input type="button" value="Add"'><span>Add</span></li> <li id='input type="button" value="Save"'><span>Save</span></li> <li id='input type="button" value="update"'><span>Update</span></li> </ul>--%> </div> </div> <table> <tr> <td> </td> </tr> </table> <table> <tr> <td> <input type="button" id="aBAddClnBtn" value="Add Column" /> </td> </tr> </table> </td> <td style="width: 60%; height: 100%; vertical-align: top;"> <div id="divContent" class="back" style="border: solid 3px gray; height: 500px; width: 100%;"> <div id="divColumn1" style="border: solid 1px gray; width: 15%; height: 100%;"> <div class="divDragDropHeader" id="divHeader1"> </div> <div class="divDragDropData" id="divData1"> </div> </div> <%-- <div id="divColumn2" style="border: solid 1px gray; width: 15%; height: 100%;"> <div class="divDragDropHeader" id="divHeader2"> </div> <div class="divDragDropData" id="divData2"> </div> </div>--%> <div id="navigate"> <div id="nav_left"> <a href="" id="btn_clear">Clear </a> </div> </div> </div> </td> <td id="tdPropertyWindow" style="width: 25%; height: 100%; vertical-align: top;"> <div id="lYPropertyWindow" style="width: 100%; background-color: Gray;"> <table> <tr> <td colspan="2" align="center"> <b>Properties</b> </td> </tr> <tr> <td> <b>ControlType</b> </td> <td> <select id="lBControlType" name="lBControlType" style="width: 125px;"> <option value='label'>Label</option> <option value="input type='text'">Textbox</option> <option value='select'>DropDown</option> <option value='textarea'>Textarea</option> <option value='input type="button" value="Save"'>Save Button</option> <option value='input type="button" value="Add"'>Add Button</option> <option value='input type="button" value="Update"'>Update Button</option> <%-- <option value="EmpId">EmpId</option> <option value="EmployeeName">EmployeeName</option> <option value="JobTitle">JobTitle</option> <option value="Division">Division</option> <option value="Location">Location</option> <option value="HireDate">HireDate</option> <option value="PerformanceResults">PerformanceResults</option> <option value="PerformanceBehaviour">PerformanceBehaviour</option> <option value="MeritIncrement">MeritIncrement</option> <option value="Lumpsum">Division</option> <option value="PromoJobTitle">PromoJobTitle</option> <option value="PromoIncrement">PromoIncrement</option>--%> </select> </td> </tr> <tr> <td> <b>DisplayName</b> </td> <td> <input type="text" id="txtDispalyName" name="txtDisplayName" style="width: 120px;" /> </td> </tr> <tr> <td> <b>TableName</b> </td> <td> <input type="text" id="txtTableName" name="txtTableName" style="width: 120px;" /> </td> </tr> <tr> <td> <b>Width</b> </td> <td> <input type="text" id="txtWidth" name="txtWidth" style="width: 120px;" /> </td> </tr> <tr> <td> <b>Height</b> </td> <td> <input type="text" id="txtHeight" name="txtHeight" style="width: 120px;" /> </td> </tr> <tr> <td> <b>Top</b> </td> <td> <input type="text" id="txtTop" name="txtTop" style="width: 120px;" /> </td> </tr> <tr> <td> <b>Left</b> </td> <td> <input type="text" id="txtLeft" name="txtLeft" style="width: 120px;" /> </td> </tr> <tr> <td> <b>ContainerId</b> </td> <td> <input type="text" id="txtContainer" name="txtContainer" style="width: 120px" /> </td> </tr> <tr> <td> <b>Visibility</b> </td> <td> <input type="text" id="txtVisible" name="txtVisible" value="True" style="width: 120px;" /> </td> </tr> <tr> <td> <b>PrimaryKey</b> </td> <td> <select id="lBPrimaryKey" style="width: 125px;"> <option value="true">True</option> <option value="false">False</option> </select> </td> </tr> <tr> <td> <b>Used</b> </td> <td> <select id="lBUsed" style="width: 125px;"> <option value="true">True</option> <option value="false">False</option> </select> </td> </tr> <tr> <td> <b>Editable</b> </td> <td> <select id="lBEditable" style="width: 125px;"> <option value="true">True</option> <option value="false">False</option> </select> </td> </tr> <tr> <td colspan='2' align="center"> <b>Events</b> </td> </tr> <tr> <td> <b>Action</b> </td> <td> <input type="text" id="txtAction" name="txtAction" style="width: 120px" /> </td> </tr> <tr> <td colspan="2" align="center"> <b>Data Type</b> </td> </tr> <tr> <td> <b>Alpha/Num</b> </td> <td> <input type="text" id="txtAlpha" name="txtAlpha" style="width: 120px;" /> </td> </tr> <tr> <td> <b>NumberType</b> </td> <td> <input type="text" id="txtNumberType" name="txtNumberType" style="width: 120px;" /> </td> </tr> <tr> <td> <b>Precision</b> </td> <td> <input type="text" id="txtPrecision" name="txtPrecision" style="width: 120px;" /> </td> </tr> <tr align="center"> <td colspan="2"> <input type="button" id="aBSaveBtn" value="Save" /> </td> </tr> </table> </div> </td> </tr> </table> </div> </form> </body>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)