Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: jQuery JQueryUI
hello friends

i have created drag and drop the control but i want while drag the control at the same time the name should placed in header div and data div only accept the only one control. if i click the selected control it will show the property window.please can any one help me. its very urgent.
 
<script src="jquery-1.5.min.js" type="text/javascript"></script>
 
<pre>
&lt;script src=&quot;jquery-ui-1.8.9.custom.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
 
&lt;style type=&quot;text/css&quot;&gt;
    .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;
    }
&lt;/style&gt;
 
&lt;script type=&quot;text/javascript&quot;&gt;
    $(document).ready(function() {
        $(&quot;#aBAddClnBtn&quot;).click(function() {
            var new_div = &quot;&lt;div  style='border: solid 1px gray; width: 15%; '&gt;&lt;div style='border: solid 1px gray; height: 50px;'&gt;&amp;nbsp;&lt;/div&gt; &lt;div  style='border: solid 1px gray; height: 445px;'&gt;&amp;nbsp;&lt;/div&gt;&lt;/div&gt;&quot;;
            $(new_div).css(&quot;float&quot;, &quot;left&quot;).appendTo(&quot;#divContent&quot;);
            return false;
        });
    });
 
    $(document).ready(function() {
        $(&quot;.item&quot;).draggable({
            revert: true
        });
        $(&quot;.divDragDropData&quot;).draggable({
            axis: &quot;x&quot;
        });
        $(&quot;.divDragDropData&quot;).droppable({
            accept: &quot;.item&quot;,
            activeClass: &quot;drop-active&quot;,
            hoverClass: &quot;drop-hover&quot;,
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr(&quot;id&quot;);
 
                var html = '&lt;div class=&quot;icart&quot;&gt;';
                html = html + '&lt;div class=&quot;divrm&quot;&gt;';
                html = html + '&lt;a onclick=&quot;remove(this)&quot; class=&quot;remove ' + itemid + '&quot;&gt;&amp;times;&lt;/a&gt;';
                html = html + '&lt;div/&gt;' + item + '&lt;/div&gt;';
                $(&quot;.divDragDropData&quot;).append(html);
            }
        });
        $(&quot;#btn_clear&quot;).click(function() {
            $(&quot;.divDragDropData&quot;).fadeOut(&quot;2000&quot;, function() {
                $(this).html(&quot;&quot;).fadeIn(&quot;fast&quot;).css({ left: 0 });
            });
            return false;
        });
    });
    function remove(el) {
        $(el).hide();
        $(el).parent().parent().effect(&quot;highlight&quot;, { color: &quot;#ff0000&quot; }, 1000);
        $(el).parent().parent().fadeOut('1000');
        setTimeout(function() {
            $(el).parent().parent().remove();
 
        }, 1100);
    }
 
&lt;/script&gt;

</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>
&nbsp;
</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>
Posted 27-Jan-13 23:57pm
Edited 28-Jan-13 0:00am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 490
1 Sergey Alexandrovich Kryukov 395
2 Maciej Los 285
3 ProgramFOX 265
4 CHill60 200
0 OriginalGriff 490
1 Sergey Alexandrovich Kryukov 395
2 Maciej Los 285
3 ProgramFOX 265
4 CHill60 200


Advertise | Privacy | Mobile
Web01 | 2.8.150331.1 | Last Updated 28 Jan 2013
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100