graph draggable

parent f11c56d9
...@@ -73,4 +73,17 @@ body ...@@ -73,4 +73,17 @@ body
background-color: #2196F3; background-color: #2196F3;
opacity: 0.7; opacity: 0.7;
border-radius: 50%; border-radius: 50%;
}
#draggable {
padding: 0px;
position: absolute;
z-index: -1;
text-align: center;
/* border: 1px solid #d3d3d3; */
opacity: .5;
}
#draggable:hover {
opacity: 1;
} }
\ No newline at end of file
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
function showGraph(){
if ($('.showChart').is(':visible')){
$("#draggable").css('z-index', 10);
$(".showChart").hide();
$(".hideChart").show();
}else{
$("#draggable").css('z-index', -1);
$(".showChart").show();
$(".hideChart").hide();
}
}
dragElement(document.getElementById("draggable"));
\ No newline at end of file
...@@ -155,5 +155,16 @@ ...@@ -155,5 +155,16 @@
</span> </span>
</a> </a>
</li> </li>
<li>
<a class="treeview " href="#" onclick="showGraph()">
<i class="fa fa-eye showChart"></i>
<i class="fa fa-eye-slash hideChart" style="display:none"></i>
<span class="showChart">Show Chart</span>
<span class="hideChart" style="display:none">Hidden Chart</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
</ul> </ul>
</div> </div>
\ No newline at end of file
...@@ -146,7 +146,7 @@ ...@@ -146,7 +146,7 @@
</div> </div>
</div> </div>
<div class="col-md-8"> <div class="col-md-6" id="draggable">
<!-- AREA CHART --> <!-- AREA CHART -->
<div class="box box-primary"> <div class="box box-primary">
<div class="box-header with-border"> <div class="box-header with-border">
...@@ -470,4 +470,5 @@ ...@@ -470,4 +470,5 @@
<script type="text/javascript" src="{% static 'reports/js/reportImg.js' %}"></script> <script type="text/javascript" src="{% static 'reports/js/reportImg.js' %}"></script>
<script type="text/javascript" src="{% static 'reports/js/reportPdf.js' %}"></script> <script type="text/javascript" src="{% static 'reports/js/reportPdf.js' %}"></script>
<script type="text/javascript" src="{% static 'reports/js/minimap.js' %}"></script> <script type="text/javascript" src="{% static 'reports/js/minimap.js' %}"></script>
<script type="text/javascript" src="{% static 'reports/js/draggable.js' %}"></script>
{% endblock %} {% endblock %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment