Jquery 拖动元素在拖动时通过对话框更改后变为原始默认状态

Question

我的元素有这个拖放代码

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

        }
    });

这是拖动元素的代码

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

当拖动文本框时，此事件附加到它

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

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

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

以下代码处理对话框

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

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

Answer 1

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

 <label class='orig'> </label>

- 在 $(".sortable").droppable 处理程序中添加在末尾

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

它应该可以解决您的问题。请在此处查看。