jQuery draggableがドラッグして新しいコンテナに追加した後に機能しない

Question

オブジェクトをある場所から別の場所にドラッグした後にjquery draggableが動作を停止する理由がわかりません。目的は、オブジェクトがしきい値内でドラッグされた後に左から右に値を追加することでした。最初に機能しますが、要素が新しいコンテナに追加された後に機能しなくなりました。

私は何か不足していますか？

$(".draggable-right").draggable({ 
    containment: "#div-item-court" 
    ,scroll: false 
    ,stop:function(event, ui) { 
     var wrapper = $(this).parent().offset(); //$("div.box-left").offset(); 
     var wrapperDestination = $("div.box-left").offset(); 
     var borderLeft = parseInt($(this).parent().css("border-left-width"),10); //parseInt($("#div.box-left").css("border-left-width"),10); 
     var borderTop = parseInt($(this).parent().css("border-top-width"),10); //parseInt($("#div.box-left").css("border-top-width"),10); 
     var pos = ui.helper.offset(); 
     var x = $("#source_x").val(pos.left - wrapper.left - borderLeft); 
     var y = $("#source_y").val(pos.top - wrapper.top - borderTop); 
     console.log(wrapper.left +" - "+ pos.left +" - "+ borderLeft +" - "+ wrapperDestination.left); 

     if (parseInt(pos.left)/parseInt(wrapper.left) <= 0.85){ //positioned to the left, changing family 
      curLeftTotal = $("#div-total-left").text(); 
      curRightTotal = $("#div-total-right").text(); 
      toAdd = $(this).text(); 
      curLeftTotal = parseInt(curLeftTotal) + parseInt(toAdd); //add to the left family 
      curRightTotal = parseInt(curRightTotal) - parseInt(toAdd); 
      $("#div-total-left").html(curLeftTotal); 
      $("#div-total-right").html(curRightTotal); 

      //remove the object from its parent and add to the new parent 
      $(this).removeClass("draggable-right").addClass("draggable-left").removeAttr("style").css({'background-color' : 'red', 'position' : 'relative'}); 
      temp = $(this).clone(); 
      $(this).remove(); 

      //create to the new parent 
      $("div.box-left").append(temp); 

      //make the element draggable 
      temp.draggable(); <<< to make the newly added element draggable again 

      //console.log(toAdd +"-"+ curLeftTotal +"-"+ curRightTotal); 
     } 
    } 
}); 

https://jsfiddle.net/mirageservo/adr47hn5/

おかげで、

PSでコードを参照してください。いくらコードがjsFiddleで機能していないのですか？

EDIT：jsFiddleが動作しています。同様に、新たに追加された要素に動作を追加することができました。しかし、その奇妙なのは、ドラグが空になったからです。

temp.draggable({ 
    ... same code above here ... 
}); 

は、あなたの入力や提案が必要：今

.... 
temp.draggable() 

質問は再帰と上記の動作とドラッグと同じようにする方法ですが、私は下に次のコードが正しいとは思いません。

おかげで、

Answer 1

あなたは変数オブジェクト "TEMP" ドラッグ可能にしようとしています。 はこのようにそれを実行します。

 temp = $(this).clone().addClass('tempClass'); //add tempClass 

     $(this).remove(); 

     //create to the new parent 
     $("div.box-left").append(temp); 

     //make the element draggable 
     $(".tempClass").draggable(); <<< to make the newly added ".tempClass" element draggable 

Answer 2

私はあなたのコードにいくつかの変更、物事のあるべき道を作りました。私はdivの位置と幅を使用して計算を別のやり方で行うべきだと思います。もちろん、重複を避けるために、このコードをリファクタリングして、リファクタリングする必要があります。ここで

$(document).ready(function(){ 
     //console.log("jQuery Works"); 
     var totleft = 0; 
     var totright = 0; 

     $("div.box-left > div > p").each(function(i){ 
     totleft = parseInt(totleft) + parseInt($(this).text()); 
     }); 
     $("#div-total-left").html(totleft); 

     $("div.box-right > div > p").each(function(i){ 
     totright = parseInt(totright) + parseInt($(this).text()); 
     }); 
     $("#div-total-right").html(totright); 
    }); 

    var draggableLeft = { 
     containment: "#div-item-court" 
     ,scroll: false 
     ,stop:function(event, ui) { 
      var wrapper = $(this).parent().offset(); //$("div.box-left").offset(); 
      var wrapperDestination = $("div.box-right").offset(); 
      var borderLeft = parseInt($(this).parent().css("border-left-width"),10); //parseInt($("#div.box-left").css("border-left-width"),10); 
      var borderTop = parseInt($(this).parent().css("border-top-width"),10); //parseInt($("#div.box-left").css("border-top-width"),10); 
      var pos = ui.helper.offset(); 
      var x = $("#source_x").val(pos.left - wrapper.left - borderLeft); 
      var y = $("#source_y").val(pos.top - wrapper.top - borderTop); 

      /* 
      check the position of the object 
      if the object is now in the new family 
      the value should add to the new family 
      and minus from the old family 
      */ 
      var boxLeftPos = $('.box-left').position().left + $('.box-left').width(); 

      if (parseInt(pos.left)+$(this).width() > boxLeftPos){ //positioned to the right, changing family 
       curLeftTotal = $("#div-total-left").text(); 
       curRightTotal = $("#div-total-right").text(); 
       toAdd = $(this).text(); 
       curLeftTotal = parseInt(curLeftTotal) - parseInt(toAdd); //remove from the left family 
       curRightTotal = parseInt(curRightTotal) + parseInt(toAdd); 
       $("#div-total-left").html(curLeftTotal); 
       $("#div-total-right").html(curRightTotal); 

       //remove the object from its parent and add to the new parent 
       $(this).removeClass("draggable-left").addClass("draggable-right").removeAttr("style").css({'background-color' : 'blue', 'position' : 'relative'}); 
       //create to the new parent 
       $("div.box-right").append($(this).detach()); 
       $(this).draggable(getDraggableRight()); 
      } 
     } 
    }; 

    var draggableRight = { 
     containment: "#div-item-court" 
     ,scroll: false 
     ,stop:function(event, ui) { 
      var wrapper = $(this).parent().offset(); //$("div.box-left").offset(); 
      var wrapperDestination = $("div.box-left").offset(); 
      var borderLeft = parseInt($(this).parent().css("border-left-width"),10); //parseInt($("#div.box-left").css("border-left-width"),10); 
      var borderTop = parseInt($(this).parent().css("border-top-width"),10); //parseInt($("#div.box-left").css("border-top-width"),10); 
      var pos = ui.helper.offset(); 
      var x = $("#source_x").val(pos.left - wrapper.left - borderLeft); 
      var y = $("#source_y").val(pos.top - wrapper.top - borderTop); 

     var boxLeftPos = $('.box-left').position().left + $('.box-left').width(); 

      if (parseInt(pos.left)+$(this).width() > boxLeftPos){ //positioned to the right, changing family 

       curLeftTotal = $("#div-total-left").text(); 
       curRightTotal = $("#div-total-right").text(); 
       toAdd = $(this).text(); 
       curLeftTotal = parseInt(curLeftTotal) + parseInt(toAdd); //add to the left family 
       curRightTotal = parseInt(curRightTotal) - parseInt(toAdd); 
       $("#div-total-left").html(curLeftTotal); 
       $("#div-total-right").html(curRightTotal); 

       //remove the object from its parent and add to the new parent 
       $(this).removeClass("draggable-right").addClass("draggable-left").removeAttr("style").css({'background-color' : 'red', 'position' : 'relative'}); 
       //create to the new parent 
       $("div.box-left").append($(this).detach()); 
       $(this).draggable(getDraggableLeft()); 
      } 
     } 
}; 

    function getDraggableRight() { 
    return draggableRight; 
    } 
    function getDraggableLeft() { 
    return draggableLeft; 
    } 

    $(function() { 
     $(".draggable-left").draggable(draggableLeft); 
    $(".draggable-right").draggable(draggableRight); 
    }); 

はリンクです：https://jsfiddle.net/adr47hn5/7/