My circular div is being dragged for a drag and drop operation, but there's always a translucent square around it.
How can I remove this unwanted effect?
body{
background : #BBD1DF;
}
.dragdemo {
width: 170px;
height: 170px;
line-height: 100px;
text-align: center;
border-radius: 50%;
background: green;
color: #efe;
}
.bgcolor{
background : transparent;
}
#coverup {
background: white;
width: 170px;
height: 100px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
<div class="bgcolor">
<div id="drag-coveredup" class="dragdemo" draggable="true">drag me</div>
</div>
I attempted to use a gif around the circular div to make it transparent, but that solution did not work as expected.
For reference, here is the link to the jsfiddle - http://jsfiddle.net/j6YuX/1/