将物品放入卡片的问题答案

【问题标题】：Problems with drop an item to card将物品放入卡片的问题
【发布时间】：2014-04-03 09:10:32
【问题描述】：

当我通过按钮（添加卡片）在收件箱列表中添加卡片时，卡片可在不同列表之间排序。这工作正常。问题来了，当我尝试从成员列表中拖动一个项目并将其放到卡片上时。它不起作用。
这是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;
}

【问题讨论】：

标签： javascript jquery html css jquery-ui-droppable

【解决方案1】：

问题是因为您正在动态创建项目，并且它们没有自动启用 droppable。为此，请在创建新元素时附加 droppable。

要在您放下棋盘时处理可排序的功能，请克隆元素并将其位置更改为relative。

代码：

$('#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;
        }
    }
});

演示：http://jsfiddle.net/IrvinDominin/zjBP2/

【讨论】：

你是对的。但是为什么物品掉落后会消失？？
@AdiT 检查此jsfiddle.net/RspuF/1 我会尽快在答案中添加一些说明