Click here to Skip to main content
12,073,837 members (67,523 online)
Rate this:
Please Sign up or sign in to vote.
See more: jQuery jquery-ui
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>
    <script src="jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
    <style type="text/css">
            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;
            width: 610px;
            margin: 0 auto;
            margin-top: 10px;
            margin-bottom: 10px;
        .icart, .icart label
            cursor: e-resize;
            text-align: left;
            text-decoration: none;
            cursor: pointer;
            font-weight: bold;
            font-size: 20px;
            position: relative;
            top: -7px;
            color: #999;
            clear: both;
            height: 50px;
            width: 100%;
            z-index: 0;
            cursor: e-resize;
            border: solid 1px gray;
            height: 445px;
            width: 100%;
            position: relative;
            padding: 0 0 0 2px;
            z-index: 0;
            cursor: e-resize;
            border-width: 0 1px;
            background: #e9e9e9;
            background: #ffff99;
            background: #ffff66;
            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;
    <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;'>&nbsp;</div> <div  style='border: solid 1px gray; height: 445px;'>&nbsp;</div></div>";
                $(new_div).css("float", "left").appendTo("#divContent");
                return false;
        $(document).ready(function() {
                revert: true
                axis: "x"
                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 + '">&times;</a>';
                    html = html + '<div/>' + item + '</div>';
            $("#btn_clear").click(function() {
                $(".divDragDropData").fadeOut("2000", function() {
                    $(this).html("").fadeIn("fast").css({ left: 0 });
                return false;
        function remove(el) {
            $(el).parent().parent().effect("highlight", { color: "#ff0000" }, 1000);
            setTimeout(function() {
            }, 1100);
    <form id="form1" runat="server">
        <table width="100%" cellspacing="5">
                <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 id="divFieldDetails">
                            <div class="item" id="Empid">
                            <div class="item" id="EmployeeName">
                            <div class="item" id="JobTitle">
                            <div class="item" id="Division">
                            <div class="item" id="Location">
                            <div class="item" id="HireDate">
                            <div class="item" id="PerformanceResults">
                            <div class="item" id="PerformanceBehaviour">
                            <div class="item" id="MeritIncrement">
                            <div class="item" id="PromoJobTitle">
                            <div class="item" id="PromoIncrement">
                            <%-- <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>
Posted 27-Jan-13 23:57pm
Edited 28-Jan-13 0:00am

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

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.160208.1 | Last Updated 28 Jan 2013
Copyright © CodeProject, 1999-2016
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