드래그 할 때 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"); 
             } 
         } 
         }); 

여기에서 일어나고있는 것은 내가 상향 링크 리 목록에 끌어 텍스트 상자가 있고 그 정렬 때문이다 텍스트 상자가 목록에 추가 된 다음 텍스트 상자에 첨부 된 속성 링크를 표시하고 닫습니다. 속성을 클릭하면 대화 상자가 열리고 새 레이블을 묻습니다. 사용자는 그와 함께 표시되는 텍스트 상자에 새 레이블을 제공합니다. 하지만 잘못 될 수있는 것은 다시 정렬 가능한 목록의 상자를 위로 또는 아래로 드래그하여 초기 상태로 되돌리고 새 레이블이 손실되는 경우입니다. 이는 도우미 복제본 때문이거나 복제본을 만들어야한다고 생각합니다. 드래그 가능한 아이템?

Answer 1

는 원래의 요소가 폴더 만 당신을 복사 구별하는 간단한 트릭을 사용하여 드래그 이 - 원래의 요소 예를 들어

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

의 라벨에 클래스를 추가 - 당신의 $에 ("정렬.") 낙하 할. 처리기가 끝까지 추가

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

문제가 해결됩니다. 확인하십시오. here.