"jquery drag and drop test"
Bootstrap 4.1.1 Snippet by hwanee47

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Black Dashboard PRO React
Bootstrap Drag and Drop Upload

Questions / Comments: