Problems with drop an item to card

StackOverflow https://stackoverflow.com/questions/22832900

Question

When I add a Card in in-box list via button (Add a card), the card is sortable between the different lists. This works fine. The problem comes, when I try to drag an item from member list and drop it to the card. It doesn't work.
Here is the Demo

HTML:

<body>
    <div id="wrapper">
        <div id="inboxList" class="cellContainer">
            <p style="display: inline;">Inbox</p>
            <button id="AddCardBtn">
                Add A Card...
            </button>
            <div id="userAddedDiv"></div>
        </div>
        <!--Member list-->
        <div id="members" class="cellContainer">
            <br style="line-height: 23px" />
            <p>Members</p>

            <div class="draggable">1</div>
            <div class="draggable">2</div>
            <div class="draggable">3</div>
        </div>
        <div id="onHoldList" class="cellContainer">
            <p>On Hold</p>
        </div>
        <div id="Done" class="cellContainer">
            <p>On Hold</p>
        </div>

    </div>
</body>

Jquery:

$(function () {
        $('.cellContainer').sortable({
            items: '.sortable-div',
            containment: 'document',
            cursor: 'crosshair',
            opacity: '0.70',
            connectWith: '.cellContainer',
            hoverClass: '.border'
        });
    });

     $(".draggable").draggable({ revert: "invalid", snap: "true", snapMode: "inner", helper: 'clone' });

    $(".sortable-div").droppable({
        accept: '.draggable',
        drop: function (event, ui) {
            ui.helper.css('top', '');
            ui.helper.css('left', '');
            $(this).find('.bottom').prepend(ui.helper);
        }
    });

CSS:

#members, #onHoldList, #Done {
    width: 275px;
    height: 230px;
    background-color: #f0f0f0;
    border: 1px solid black;
    margin-left: 1%;
    margin-top: 0.4%;
    border-radius: 10px;
    box-shadow: 7px 7px 7px #828282;
    overflow: auto;
}
#inboxList {
    width: 275px;
    height: 230px;
    background-color: #f0f0f0;
    border: 1px solid black;
    margin-left: 0.5%;
    margin-top: 0.4%;
    border-radius: 10px;
    box-shadow: 7px 7px 7px #828282;
    overflow: auto;
}

.cellContainer .sortable-div {
    background: red;
    width: 260px;
    height: 150px;
    margin-left: 2.3%;
    border-radius: 10px;
    border: 2px solid black;
    box-shadow: 0px 7px 7px #828282;
    margin-bottom: 1%;
}
.draggable {
   display:inline-block;
   border:1px solid blue;
   height: 50px;
   width: 50px;
   margin-right: 1px;
   text-align: center;
   vertical-align: center;
}

 .bottom {
    position: absolute;
    bottom: 0;
    height:25px;
    width:150px;
}
Was it helpful?

Solution

The problem is because your are creating items dynamically and they have not automatically the droppable enabled. To do so attach the droppable when you create the new element.

To handle the sortable feature of the board when you drop, clone the element anche change its position to relative.

Code:

$('#AddCardBtn').click(function () {
    var numberOfDiv = [100];

    with(document) {
        var $newDiv = $('<div />').addClass('sortable-div');
        $('#userAddedDiv').append($newDiv)

        $newDiv.droppable({
            accept: '.draggable',
            drop: function (event, ui) {
                $(this).append($(ui.helper).clone().css({position: 'relative', top: '0', left:'0'}));
            }
        });

        for (var i = 0; i < numberOfDiv; i++) {
            numberOfDiv[i] = $newDiv;
        }
    }
});

Demo: http://jsfiddle.net/IrvinDominin/zjBP2/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top