5 changed files with 37 additions and 44 deletions
@ -1 +1,2 @@ |
|||||
__pycache__/ |
__pycache__/ |
||||
|
static/audio/ |
||||
|
|||||
Binary file not shown.
@ -1,7 +1,11 @@ |
|||||
* { |
/* * { |
||||
background-color: red; |
background-color: red; |
||||
} |
} */ |
||||
|
|
||||
#video1 { |
#video1 { |
||||
padding-top: 100px; |
padding-top: 100px; |
||||
} |
} |
||||
|
|
||||
|
.draggable img { |
||||
|
opacity: 0.7; |
||||
|
} |
||||
|
|||||
@ -1,43 +1,21 @@ |
|||||
//Make the DIV element draggagle:
|
// draggable
|
||||
dragElement(document.getElementById("draggable")); |
$(document).ready(function() { |
||||
|
var a = 3; |
||||
|
var dragOpts = { |
||||
|
cursor: "move", |
||||
|
cursor: "grab", |
||||
|
// axis: "y",
|
||||
|
distance: "0", |
||||
|
// cursorAt: {
|
||||
|
// top: 0,
|
||||
|
// left: 0
|
||||
|
// }
|
||||
|
}; |
||||
|
|
||||
function dragElement(elmnt) { |
$('.draggable').draggable({ |
||||
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; |
start: function(event, ui) { $(this).css("z-index", a++); } |
||||
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; |
|
||||
} |
|
||||
} |
|
||||
|
|||||
@ -1,19 +1,29 @@ |
|||||
<!doctype html> |
<!doctype html> |
||||
<html> |
<html> |
||||
<style> |
<style> |
||||
#draggable { |
.draggable { |
||||
position: absolute; |
position: absolute; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> |
||||
|
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> |
||||
|
<script src="../static/js/draggable.js"></script> |
||||
|
<link href="../static/css/style.css" rel="stylesheet" type="text/css"> |
||||
<head> |
<head> |
||||
<title>PerspectiveB</title> |
<title>PerspectiveB</title> |
||||
<h1>VVVW - PerspectiveB</h1> |
<h1>VVVW - PerspectiveB</h1> |
||||
</head> |
</head> |
||||
|
|
||||
<body> |
<body> |
||||
<div id="draggable"> |
<div class="draggable"> |
||||
<img src="../static/images/test1.jpeg" width='500px' alt="test"> |
<img src="../static/images/test1.jpeg" width='500px' alt="test"> |
||||
</div> |
</div> |
||||
<script src="../static/js/draggable.js"></script> |
<div class="draggable"> |
||||
|
<img src="../static/images/test2.jpeg" width='500px' alt="test"> |
||||
|
</div> |
||||
|
<div class="draggable"> |
||||
|
<img src="../static/images/test3.jpeg" width='500px' alt="test"> |
||||
|
</div> |
||||
|
|
||||
</body> |
</body> |
||||
</html> |
</html> |
||||
|
|||||
Loading…
Reference in new issue