<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container">
<div class="d-flex">
<div class="col-10 d-flex" id="content">
<div class="dropzone">
asd
</div>
<div class="tt">
asdasxzcxczxczxczxczxzxczxczxcxczxcasdkasdlasdklaskdalsdkalsdkalskdalsdkklasdjflkdsajflskadjflskdjflsdkjflasdkjfsladkfj
</div>
</div>
<div class="col-2" id="sidebar">
</div>
</div>
</div>
html, body{
height: 100%;
width: 100%;
}
.container{
height: 100%;
border: 1px solid gray;
}
.d-flex{
height: 100%;
}
#content{
background-color: tomato;
height: 100%;
}
#sidebar{
background-color: blue;
}
.dropzone{
width: 10%;
height: 100%;
border: 1px dashed gray;
position: absolute;
left: 0;
display: none;
}
$(function(){
$('#sidebar').draggable({
start: handlerDragStart,
cursor: 'move',
revert: function handlerRevert(is_valid_drop){
if(!is_valid_drop){
return true;
}else{
}
},
revertDuration: 1
});
$('.dropzone').droppable({
drop: handlerDropEvent,
over: handlerOverEvent,
out: handlerOutEvent
});
});
function handlerDragStart(event, ui){
$('.dropzone').css('display', 'inline');
}
function handlerDropEvent(event ,ui){
console.log("drop event");
$('#sidebar').css('top','0');
$('.dropzone').css('background-color','');
$('.dropzone').css('border','none');
$('.dropzone').css('display','none');
//sidebar order
var sidebarOrder = $('#sidebar').css('order');
console.log(sidebarOrder);
if(sidebarOrder == 1){
$('#sidebar').css('order',2);
$('#content').css('order',1);
$('#sidebar').css('left',0);
}else{
$('#sidebar').css('order',1);
$('#content').css('order',2);
$('#sidebar').css('left',0);
$('.dropzone').css('left', '1px');
$('.dropzone').css('right',0);
}
}
function handlerOverEvent(event, ui){
$('.dropzone').css('background-color', 'gray');
}
function handlerOutEvent(event, ui){
$('.dropzone').css('background-color', '');
}
