JSFiddle - React, Tailwind, and code Playground
by Aakash Chakravarthy
HTML
<script src="http://www.ajaxplaza.net/dragndrop/js/jquery.dragndrop.js"></script>
<div class="dragDiv">
<h5 class="handler">Drag me</h5>
<div class="content">Yes, it is.</div>
</div>
<div class="dragDiv2">
<h5 class="handler2">Drag me too</h5>
<div class="content2">{ zIndex: 200, opacity: .9 }</div>
</div>
CSS
body,html
{
font-family:Calibri;
font-size:12px;
line-height:18px;
}
p
{
height:30px;
}
.dragDiv
{
width:200px;
background-color:#EFF7FF;
border:1px solid #96C2F1;
position:absolute;
left:100px;
top:100px;
}
.dragDiv h5
{
background-color:#B2D3F5;
padding:5px;
margin:1px;
}
.dragDiv div
{
padding:5px;
margin-bottom:10px;
}
.dragDiv2
{
background-color:#F0FBEB;
border:1px solid #9BDF70;
width:200px;
position:absolute;
left:400px;
top:400px;
}
.dragDiv2 h5
{
background-color:#C2ECA7;
padding:5px;
margin:1px;
}
.dragDiv2 div
{
padding:5px;
margin-bottom:10px;
}
JavaScript
$('.dragDiv').Drags({
handler: '.handler',
onMove: function(e) {
$('.content').html('Div Position:(Left:' + e.pageX + ' ,Top:' + e.pageY + ')');
},
onDrop:function(e){
$('.content').html('dropped!');
}
});
$('.dragDiv2').Drags({
handler: '.handler2',
zIndex:200,
opac