Problems with drop an item to card

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

题

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;
}
有帮助吗？

解决方案

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/

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top