Click here to Skip to main content
11,710,423 members (88,240 online)
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>
 
    <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;'>&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() {
            $(".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 + '">&times;</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>--%>
Posted 27-Jan-13 22:57pm
Edited 27-Jan-13 23:00pm
v2

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

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 549
1 OriginalGriff 270
2 Peter Leow 134
3 Abhinav S 130
4 Richard MacCutchan 80
0 Abhinav S 60
1 Member 4653839 40
2 barneyman 35
3 Sergey Alexandrovich Kryukov 35
4 Member 11793820 35


Advertise | Privacy | Mobile
Web01 | 2.8.150819.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