When I click the "Add a Card" button to add a card to the in-box list, the card becomes sortable between different lists. This functionality works correctly. However, an issue arises when attempting to drag an item from the member list and drop it onto the card - this action does not work as expected.
Here is a 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;
}