Fatal编程技术网
  • javascript/
  • Javascript 将项目放入卡时出现问题

Javascript 将项目放入卡时出现问题

javascript jquery html css

Javascript 将项目放入卡时出现问题,javascript,jquery,html,css,jquery-ui-droppable,Javascript,Jquery,Html,Css,Jquery Ui Droppable,当我通过按钮（添加卡）在框列表中添加卡时，该卡可在不同列表之间进行排序。这个很好用。当我试图从会员列表中拖动一个项目并将其放到卡片上时，问题就出现了。它不起作用。 这是你的电话号码 HTML: CSS: 问题是因为您正在动态创建项目，而这些项目没有自动启用可拖放功能。要执行此操作，请在创建新元素时附加可下拉列表 要在放下时处理电路板的可排序功能，请克隆元素，并将其位置更改为相对 代码： $（'#AddCardBtn'）。单击（函数（）{ var numberOfDiv=[100]； 附（文件）{

当我通过按钮（添加卡）在框列表中添加卡时，该卡可在不同列表之间进行排序。这个很好用。当我试图从会员列表中拖动一个项目并将其放到卡片上时，问题就出现了。它不起作用。
这是你的电话号码

HTML:

CSS:

问题是因为您正在动态创建项目，而这些项目没有自动启用可拖放功能。要执行此操作，请在创建新元素时附加可下拉列表

要在放下时处理电路板的可排序功能，请克隆元素，并将其位置更改为
相对

代码：

$（'#AddCardBtn'）。单击（函数（）{
var numberOfDiv=[100]；
附（文件）{
var$newDiv=$（''）.addClass（'sortable-div'）；
$（'#useraddediv'）.append（$newDiv）
$newDiv.droppable({
接受：'.draggable'，
drop：函数（事件、用户界面）{
$（this.append（$（ui.helper.clone（）.css（{position:'relative'，top:'0'，left:'0'}））；
}
});
对于（变量i=0；i
演示：

你说得对。但是为什么物品掉落时会消失？？？@AdiT检查一下，我会在回答中添加一些澄清，谢谢你的帮助。 
<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>

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

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

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