Question

所以这是问题，我必须divs我不能拖动项目，因为当我释放鼠标按钮时，它们会回到原来的位置。

任何帮助？

HTML

<body>
    <div id="wrapper">
        <div id="onHoldList" class="cellContainer">
            <p>On Hold</p>
        </div>
        <div id="inboxList" class="cellContainer">
            <p style="display: inline;">Inbox</p>
            <button id="AddCardBtn">
                <p>Add A Card...</p>
            </button>
            <div id="userAddedDiv" class="HejMedDig"></div>
        </div>
    </div>
</body>

CSS

body {
    background-color: #DCDCDC
}
#wrapper {
    margin-top: 3%;
    margin-right: 20%;
    height: 715px;
    min-width: 300px;
    min-height: 715px;
    background-color: #00CCFF;
    box-shadow: 7px 7px 7px #828282;
    border-radius: 6px;
}
#onHoldList {
    width: 275px;
    height: 700px;
    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: 700px;
    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 {
    width: 1%;
    float: left;
    margin-right: 1%;
}
#AddCardBtn {
    background-color: #f0f0f0;
    border: 0px;
    text-decoration: none;
    color: blue;
    cursor: pointer;
    float: right;
    margin-right: 1%;
    margin-top: 1%;
    border-radius: 10px;
    height: 4%;
    width: 35%;
}
#members {
    width: 275px;
    height: 700px;
    background-color: #f0f0f0;
    border: 1px solid black;
    float: right;
    margin-bottom: 10%;
    border-radius: 10px;
}
#userAddedDiv 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%;
}
.createBoxButton {
    display:inline-block;
    padding:2px 8px;
    vertical-align:middle;
    text-decoration:none;
    color:#000;
    background:#CCC;
    border:2px solid #888;
    border-radius:8px;
}
.border {
    border: 3px solid black;
}

的JavaScript

$('document').ready(function () {
    $('#AddCardBtn').click(function () {
        var numberOfDiv = [100];
        with(document) {
            var newDiv = createElement('div');
            var div = getElementById('userAddedDiv').appendChild(newDiv);
            for (var i = 0; i < numberOfDiv; i++) {
                numberOfDiv[i] = div;
            }
        }
    });
    $(function () {
        $('#userAddedDiv').sortable({
            containment: 'document',
            cursor: 'crosshair',
            opacity: '0.70',
            connectWith: '#onHoldList',
            hoverClass: '.border'
        });
    });
});

JSFiddle

Answer 1

小提琴：http://jsfiddle.net/L2XqS/4/

您必须配置两个可排序列表：

$('#userAddedDiv').sortable({
    containment: 'document',
    cursor: 'crosshair',
    opacity: '0.70',
    connectWith: '#onHoldList',
    hoverClass: '.border'
});

$('#onHoldList').sortable({
    containment: 'document',
    cursor: 'crosshair',
    opacity: '0.70',
    connectWith: '#userAddedDiv',
    hoverClass: '.border'
});

当#onHoldList为空（无高度）时，能够将div从#userAddedDiv拖到#userAddedDiv：

#userAddedDiv
{
    height: 90%;
}

可以在div之间进行排序的问题

1 个答案: