首页 文章

拖动后通过对话框更改后的Jquery Drag Element变为orignal默认状态

提问于
浏览
0

我有我的元素的拖放代码

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

拖动文本框时,会将此事件附加到该文本框

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

$("#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列表,可以排序,文本框添加到列表,然后我显示和关闭和属性链接附加到文本框 . 单击属性时,将打开一个对话框并要求提供新标签 . user为文本框提供了新标签 . 但是出了什么问题,当我再次向上或向下拖动可排序列表中的框时,它会回到其初始状态并且新标签丢失...我认为这是由于辅助克隆或我应该克隆可拖动物品?

1 回答

  • 1

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

    <label class='orig'>&nbsp;</label>
    
    • 在你的$(“ . sortable”) . droppable handler添加到最后
    $(ui.draggable).find('.control').find('.orig').html("Label Here").removeClass('orig');
    

    它应该解决你的问题 . 检查here .

相关问题