Jquery draggable and droppable between containers, when boxes are move between the containers it needs to display the parent container number.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" id="xbox">
<div class="container">
<div class="column" draggable="true">i am container 1</div>
<h3>1</h3>
</div>
<div class="container">
<div class="column" draggable="true">i am container 2</div>
<h3>2</h3>
</div>
<div class="container">
<div class="column" draggable="true">i am container 3</div>
<h3>3</h3>
</div>
</div>
<div class="row">
<button class="append">
Add
</button>
</div>
.column {
display: inline-block;
width: 200px;
height: 100px;
background-color: #ccc;
border-radius: 15px;
}
.over {
outline: 3px solid green
}
.moving {
outline:2px solid red;
}
[draggable=true] {
cursor: move;
}
$(document).on('click', '.append', function(){
total=$(this).parent().prev().find('.container').children('.column').length;
$('.box').append('<div class="container"></div>');
for(i=total+1;i<total+2;i++) {
$('.container').last().append("<div class='column'>i am container"+i+"</div>");
}
$('.container').last().append('<h3>'+(total+1)/1+'</h3>');
});
(function () {
/*note: classList methods only >=ie10*/
var id_ = 'xbox';
var boxes_ = document.querySelectorAll('#' + id_ + ' .column');
var dragSrcEl_ = null;
this.handleDragStart = function (e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
dragSrcEl_ = this;
this.style.opacity = '0.5';
// this/e.target is the source node.
this.classList.add('moving');
};
this.handleDragOver = function (e) {
if (e.preventDefault) {
e.preventDefault(); // Allows us to drop.
}
e.dataTransfer.dropEffect = 'move';
return false;
};
this.handleDragEnter = function (e) {
this.classList.add('over');
};
this.handleDragLeave = function (e) {
// this/e.target is previous target element.
this.classList.remove('over');
};
this.handleDrop = function (e) {
// this/e.target is current target element.
if (e.stopPropagation) {
e.stopPropagation(); // stops the browser from redirecting.
}
// Don't do anything if we're dropping on the same box we're dragging.
if (dragSrcEl_ != this) {
dragSrcEl_.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
};
this.handleDragEnd = function (e) {
// this/e.target is the source node.
this.style.opacity = '1';
[ ].forEach.call(boxes_, function (column) {
box.classList.remove('over');
box.classList.remove('moving');
});
};
[ ].forEach.call(boxes_, function (box) {
box.setAttribute('draggable', 'true'); // Enable boxes to be draggable.
box.addEventListener('dragstart', this.handleDragStart, false);
box.addEventListener('dragenter', this.handleDragEnter, false);
box.addEventListener('dragover', this.handleDragOver, false);
box.addEventListener('dragleave', this.handleDragLeave, false);
box.addEventListener('drop', this.handleDrop, false);
box.addEventListener('dragend', this.handleDragEnd, false);
});
})();
