Jquery Drag Element after changing through dialog when dragged gets to orignal default state

i have this drag drop code for my elements

$( ".sortable" ).sortable({
  revert: true
});
        $( ".draggable" ).draggable({
            connectToSortable: ".sortable",
            helper: "clone", //clone 
        revert: "true"
    });
     $( ".sortable" ).droppable({
        drop: function( event, ui ) {
             var $element = $(ui.draggable).clone();

            $element.find('.control').children('.delete').css('display', 'inline').click(function ()开发者_如何学Python {
                $(this).parent().remove();
            });// display properties Link
            $element.find('.control').children('.properties').css('display', 'inline'); 

            //For Text Box Change the text and add a label
            if($element.find('.control').find('input').attr('type') == "text")
            {
                $element.find('.control').find('.controlText').html("");
                $element.find('.control').find('label').html("Label Here"); 
            }

        }
    });

This is the code for the drag element

 <div class="tools">    
 <ul>
 <li class="draggable" >
     <div class="control">
      <label>&nbsp;</label>
      <input type="text" name="txt" value="" /><span class="controlText"> Text Box </span>
      <div class="delete" style="display:none"><sup>x</sup></div>
      <div class="properties txtbox" style="display:none">Properties</div>
     </div>
    </li>
 </ul>
 </div>

When the Text Box is dragged this event is attached to it

$('.txtbox').live('click', function() {
     //get the label
        var label = $(this).parent().find('label').html();
        $("#textbox_label").val(label);
        $( "#dialog-textbox" ).dialog( "open" ).data('parent_div',$(this).parent());
        return false;
});

This is the dialog which opens when the Properties is clicked

<div id="dialog-textbox" title="Text Box Properties" style="display:none">
<p>This is the Text Box Properties Form.</p>
<form>
<fieldset>
    <label for="textbox_label">Enter Label </label>
    <input type="text" name="textbox_label" id="textbox_label" class="text ui-widget-content ui-corner-all" />      
</fieldset>
</form>

The following code handles the Dialog

 $("#dialog-textbox").dialog({
                        autoOpen: false,
                        height: 300,
                        width: 350,
                        modal: true,
                        buttons: {
                                "Apply": function(){
                                     //code to update element goes here...
                                    var label = $("#textbox_label").val()
                                    var $elem_clicked = $("#dialog-textbox").data('parent_div'); //This retrieves
                                    $elem_clicked.find('label').html(label); 
                                    $( this ).dialog( "close" );
                                    },
                                Cancel: function() {
                                            $( this ).dialog( "close" );
                                        }
                        }
                         });

What is happening here is that i have a text box which i drag to a ul li list and that is sortable, the text box is added to the list and and then i show and close and properties links attached to the text box. when the properties is clicked a dialog box opens and asks for a new label. user gives new label to the text box that is shown with that. But what goes wrong is when i again drag the box in the sortable list up or down it goes back to its initial state and the new label is lost... I think this is due to the helper clone or should i make a clone of the draggable item?

Use a simple trick to distinguish you original element fromthe copy you drag: - add a class to the label of the original element eg

 <label class='orig'>&nbsp;</label>

- in your $(".sortable").droppable handler add atthe end

$(ui.draggable).find('.control').find('.orig').html("Label Here").removeClass('orig');

It should solve your problem. Check it here.