變身我不能刪除它的clone

Question

我需要在與變身插件功能後，再次克隆項目：

1. 從containerB運動項目containerA確認框apperas後「你真的要複製？」
2. 單擊「否」或在此框外部克隆的項目被刪除。
3. 我應該能夠再次執行此操作（嘗試再次克隆相同的項目）。

---

的jsfiddle：http://jsfiddle.net/owm6wo0r/2/

---

這裏是我的錯誤，我試圖從昨天來解決。

因爲我刪除克隆項目，變身找不到「選擇」項，並返回控制檯錯誤： Uncaught TypeError: Cannot read property 'left' of undefined 在這行代碼：https://github.com/McPants/jquery.shapeshift/blob/master/core/jquery.shapeshift.js#L441

請注意，我仍然可以克隆其他項目中，只有那些曾經被克隆過的產生這個錯誤，不能再被拖拽或克隆。

我不知道如何使這個去除克隆項目未做$（選擇）空...

我想要做的是，當我試圖再次克隆此項目，$（選擇）應更新爲我試圖拖動的項目。

而且什麼是怪我，是變身不加入級「SS-克隆兒」來克隆項目...

啤酒的人誰可以解決這個問題。

---

HTML：

<div class="dragdrop"> 
    <div>Item 11</div> 
    <div>Item 12</div> 
    <div>Item 13</div> 
    <div>Item 14</div> 
</div> 


<div class="dragshared"> 
    <div>Item 1</div> 
    <div>Item 2</div> 
    <div>Item 3</div> 
    <div>Item 4</div> 
</div> 

JS：

$('.nav-tabs a').click(function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
}); 

$('.dragdrop').shapeshift({ 
    selector: "div", 
    enableResize: false, 
    align: "left", 
    paddingX: 0, 
    paddingY: 0, 
    gutterX: 35, 
    gutterY: 70, 
    colWidth: 190, 
    animated: false, 
    minColums: 4, 
    dragClone: false, 
    enableDrag: true, 
    enableCrossDrop: true 
}); 

$('.dragshared').shapeshift({ 
    selector: "div", 
    enableResize: false, 
    align: "left", 
    paddingX: 0, 
    paddingY: 0, 
    gutterX: 35, 
    gutterY: 70, 
    colWidth: 190, 
    animated: false, 
    minColums: 4, 
    deleteClone: true, 
    dragClone: true, 
    enableCrossDrop: false 
}); 

var $containers = $(".dragshared, .dragdrop"); 


    $containers.on("ss-added", function(e, selected) { 
     setTimeout(function() { 
      $(selected).append("<div class='duplication-confirmation-box'><p>Do you want to duplicate this alert from Shared Alerts to Your Alerts?</p><a href='#' class='btn conf-box-btn conf-duplicate-alert'><span>Duplicate</span><span class='ico ico-check'></span></a><a href='#' class='btn conf-box-btn remove-duplicated'><span>No</span><span class='ico ico-cancel'></span></a></div>"); 

      var duplicationBox = $('.duplication-confirmation-box'); 

      $('.conf-duplicate-alert').on('click.confDuplication', function(e) { 
       console.log("here duplication should happen"); 
       duplicationBox.remove(); 
       $containers.on("ss-drop-complete", function() { 
        $(document).off('click.confDuplication'); 
       }); 
      }); 

      $('.remove-duplicated').on('click.confDuplication', function(e) { 
       $(selected).remove(); 
       $containers.trigger("ss-rearrange"); 
       $(document).off('click.confDuplication'); 
      }); 
      $(document).on("click.confDuplication", function(e) { 
       if ($(selected).find(duplicationBox).length === 1) { 
        var clickTarget = $(e.target); 
        // if click target has class ... || or is child of this item 
        if (clickTarget.hasClass('duplication-confirmation-box') || clickTarget.closest('.duplication-confirmation-box').length > 0) { 
         // 
        } else { 
         $(selected).remove(); 
         $containers.trigger("ss-rearrange"); 
         $(document).off('click.confDuplication'); 
        } 
       } 
      }); 
     }, 300); 
    }); 

Answer 1

解決方案：

var $containers = $(".dragshared, .dragdrop"); 

setTimeout(function() { 
    $(selected).append("<div class='duplication-confirmation-box'><p>Do you want to duplicate this alert from Shared Alerts to Your Alerts?</p><a href='#' class='btn conf-box-btn conf-duplicate-alert'><span>Duplicate</span><span class='ico ico-check'></span></a><a href='#' class='btn conf-box-btn remove-duplicated'><span>No</span><span class='ico ico-cancel'></span></a></div>");  
    var duplicationBox = $('.duplication-confirmation-box'); 

    $('.conf-duplicate-alert').on('click.confDuplication', function(e) { 
     console.log("here duplication should happen"); 
     e.preventDefault(); 
     duplicationBox.remove(); 
     $containers.on("ss-drop-complete", function() { 
      $(document).off('click.confDuplication'); 
     }); 
    }); 

    $('.remove-duplicated').on('click.confDuplication', function(e) { 
     var selectedAlertId = $(selected).attr("data-alert-id"); 
     var clonedParent = ".dragshared .single-alert-box[data-alert-id='"+selectedAlertId+"']"; 
     e.preventDefault(); 
     $(selected).insertAfter('.dragshared [data-alert-id="'+selectedAlertId+'"]'); 
     duplicationBox.remove(); 
     $(clonedParent+':eq(0)').remove(); 
     $containers.trigger("ss-rearrange"); 
     $(document).off('click.confDuplication'); 

    }); 

    $(document).on("click.confDuplication", function(e) { 
     if ($(selected).find(duplicationBox).length === 1) { 
      var clickTarget = $(e.target); 
      // if click target has class ... || or is child of this item 
      if (clickTarget.hasClass('duplication-confirmation-box') || clickTarget.closest('.duplication-confirmation-box').length > 0) { 
       // 
      } else { 
       var selectedAlertId = $(selected).attr("data-alert-id"); 
       var clonedParent = ".dragshared .single-alert-box[data-alert-id='"+selectedAlertId+"']"; 
       e.preventDefault(); 
       $(selected).insertAfter('.dragshared [data-alert-id="'+selectedAlertId+'"]'); 
       duplicationBox.remove(); 
       $(clonedParent+':eq(0)').remove(); 
       $containers.trigger("ss-rearrange"); 
       $(document).off('click.confDuplication'); 
      } 
     } 
    }); 
}, 300);