Shapeshift I can't clone item again after removing it's clone

Question

I need following functionality with shapeshift plugin:

After moving item from containerB to containerA confirmation box apperas "Do you really want to duplicate?"
When clicking "No" or outside this box cloned item is removed.
I should be able perfom this action again (try to clone the same item again).

JSFiddle: http://jsfiddle.net/owm6wo0r/2/

And here is my bug I'm trying to resolve since yesterday.

Since I removed cloned item, shapeshift can't find "selected" item, and returns console error: Uncaught TypeError: Cannot read property 'left' of undefined On this line of code: https://github.com/McPants/jquery.shapeshift/blob/master/core/jquery.shapeshift.js#L441

Notice that I still can clone other items, only the ones that once have been cloned produce this error and can't be dragged or cloned again.

I have no idea how to make this removal of cloned item without making $(selected) null...

What I would like to do is that when I tried again clone this item, $(selected) should update to item I'm trying to drag.

Moreover what is weird to me, is that shapeshift is not adding class "ss-cloned-child" to cloned item...

Beer for someone who can resolve this issue.

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);
    });

score 0 · Answer 1 · answered Aug 18 '15 at 09:44

Solution:

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);

Shapeshift I can't clone item again after removing it's clone

1 Answers1