Javascript 当拖动到原始默认状态时，通过对话框更改后的Jquery拖动元素

我有这个拖放代码为我的元素

$( ".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 () {
                $(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"); 
            }

        }
    });

这是drag元素的代码

 <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>

这是单击属性时打开的对话框

<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>

---

这里发生的事情是，我有一个文本框，我把它拖到ul li列表中，它是可排序的，文本框被添加到列表中，然后我显示并关闭附加到文本框的属性链接。单击属性时，会打开一个对话框，要求添加新标签。用户为显示的文本框添加新标签。但问题是，当我再次向上或向下拖动可排序列表中的框时，它会返回其初始状态，新标签将丢失。。。我认为这是由于助手克隆造成的，还是应该克隆可拖动项？

使用一个简单的技巧来区分原始元素和拖动的副本： -将类添加到原始元素的标签中，例如

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

---

它应该能解决你的问题。检查一下

这里有一个链接，可以了解我正在做什么

 $("#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" );
                                        }
                        }
                         });

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

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