jQuery内の削除可能なアイテムにクラスを追加するdrackableおよびdroppable

Question

アイテムを削除可能領域にドロップすると、特定のdivに「折りたたみ」のクラスを追加しようとしています。私は正常に削除可能なアイテムからクラスを削除することができましたが、1つを追加することは私を暗示しています。助けてもらえますか？

jQueryの

$(function() { 
     var removeIntent; 
     $(".drag li").draggable({ 
      cursor: "move", 
      revert: "invalid", 
      helper: "clone", 
     }); 
     //Droppable function 
     $(".droppable").droppable({ 
      activeClass: "ui-state-hover", 
      hoverClass: "ui-state-active", 
      accept: ":not(.ui-sortable-helper)", 
      drop: function (event, ui) { 

       var dropId = ui.draggable.attr("id"); 
       var targetCount = $(this).find("[id*='clone']").length; 
       var $dropElemClone = ui.draggable.clone(); 
       $dropElemClone 
        .attr("id", dropId + "-clone-" + (targetCount + 1)) 
        .appendTo(this) 
        .addClass("form-btn-wide") 
        .find(".elementHidden") 
        .removeClass("elementHidden");      
      } 



      //Sorting function 
     }).sortable({ 
      items: "> li:not(.placeholder)", 
      sort: function() { 
       $(this).removeClass("ui-state-default"); 
      }, 
      over: function() { 
       removeIntent = false; 
      }, //Remove function 
      out: function() { 
       removeIntent = true;      
      }, 
      beforeStop: function (event, ui) { 
       if (removeIntent == true) { 
        ui.item.remove(); 
       } 
      } 
     }) 
    }); 

ドロップ可HTML

<div class="createForm droppable"> 
<div class="col-md-12 text-center"> 
    <p>Onboarding glory aways you, %User.Name%. Go forth and automate.<br /></p> 
    <div class="panel panel-default col-md-offset-2 col-md-8"> 
     <div class="panel-body"> 
      <p>How do you want to trigger this<br /> onboarding sequence?</p> 
      <input type="button" class="btn btn-sm btn-primary" value="Set enrollment" /> 
     </div> 
    </div> 
</div> 
<div class="col-md-offset-5 col-md-2 text-center"> 
    <i class="fa fa-2x fa-arrow-down" aria-hidden="true"></i> 
</div> 

ドラッグ可能なHTML

<ol id="two-col" class="drag"> 
<li class="btn form-btn draggable"> 
    <div id="cardtitle" class="cardtitle"> 
     <div> 
      <i class="fa fa-check-circle fa-3x text-primary"></i> 
     </div> 
     <div class="row m-t-md"> 
      <p class="text-primary text-center"><strong>Complete<br /> Vendor Profile</strong></p> 
     </div> 
    </div> 
    <div class="panel panel-default col-md-offset-2 col-md-8 elementHidden text-center"> 
     <div class="panel-body"> 
      <div> 
       <i class="fa fa-check-circle fa-3x text-primary"></i> 
      </div> 
      <div class="row m-t-md"> 
       <p class="text-primary text-center"><strong>Complete Vendor Profile</strong></p> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-offset-5 col-md-2 text-center elementHidden"> 
     <i class="fa fa-2x fa-arrow-down" aria-hidden="true"></i> 
    </div> 
</li> 
</ol> 

私は、崩壊のクラスを追加するためにカードタイトルとクラスを呼び出そうとしましたが、運がなかった。誰にもアイデアはありますか？

Answer 1

私はそれが次の行の項目を追加することで動作させることができました：

$("#undefined-clone-" + (targetCount + 1)).find('.cardtitle').hide(); 

ドロップ

drop: function (event, ui) { 

       var dropId = ui.draggable.attr("id"); 
       var targetCount = $(this).find("[id*='clone']").length; 
       var $dropElemClone = ui.draggable.clone(); 
       $dropElemClone 
        .attr("id", dropId + "-clone-" + (targetCount + 1)) 
        .appendTo(this) 
        .addClass("form-btn-wide") 
        .find(".elementHidden") 
        .removeClass("elementHidden"); 
       $("#undefined-clone-" + (targetCount + 1)).find('.cardtitle').hide(); 
      }