Telos4/RoboRallyGUI
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Simon Pirkelmann 2020-09-11 14:30:40 +02:00
commit 90278d23dc
5 changed files with 11015 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app.py Normal file
View File

@ -0,0 +1,12 @@
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def hello_world():
return render_template('drag_example.html')
if __name__ == '__main__':
app.run()

10872
static/jquery-3.5.1.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

13
static/jquery-ui.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

29
static/style.css Normal file
View File

@ -0,0 +1,29 @@
.main-canvas {
outline: 1px solid #dddddd;;
width: 500px;
height: 220px;
margin: 50px auto 0;
position: relative;
}
.box{
width: 62px;
height: 100px;
position: absolute;
top: 100px;
font-size: 24px;
color: #ffffff;
line-height: 25px;
text-align: center;
cursor: move;
}
.card1 { left: 0; top: 0; background-color: #E74C3C; }
.card2 { left: 100px; top: 0; background-color: #8E44AD; }
.card3 { left: 200px; top: 0; background-color: #5DADE2; }
.card4 { left: 300px; top: 0; background-color: #1ABC9C; }
.card5 { left: 400px; top: 0; background-color: #F1C40F; }
.card6 { left: 50px; top: 120px; background-color: #F39C12; }
.card7 { left: 150px; top: 120px; background-color: #34495E; }
.card8 { left: 250px; top: 120px; background-color: #FF00FF; }
.card9 { left: 350px; top: 120px; background-color: #008080; }

89
templates/drag_example.html Normal file
View File

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag</title>
<script src="static/jquery-3.5.1.js"></script>
<script src="static/jquery-ui.min.js"></script>
<link rel="stylesheet" href="static/style.css">
</head>
<body>
<!-- container -->
<div class="container">
<div class="main-canvas">
<div class="box card1" name="card1">1 up
<p style="font-size: 10px">100</p>
</div>
<div class="box card2">2</div>
<div class="box card3">3</div>
<div class="box card4">4</div>
<div class="box card5">5</div>
<div class="box card6">6</div>
<div class="box card7">7</div>
<div class="box card8">8</div>
<div class="box card9">9</div>
</div>
</div><!-- container -->
<script>
$(document).ready(function () {
var box = $(".box");
var mainCanvas = $(".main-canvas");
box.draggable({
containment: mainCanvas,
helper: "clone",
start: function () {
$(this).css({
opacity: 0
});
$(".box").css("z-index", "0");
},
stop: function () {
$(this).css({
opacity: 1
});
}
});
box.droppable({
accept: box,
drop: function (event, ui) {
var draggable = ui.draggable;
var droppable = $(this);
var dragPos = draggable.position();
var dropPos = droppable.position();
console.log(dropPos);
draggable.css({
left: dropPos.left + "px",
top: dropPos.top + "px",
"z-index": 20
});
droppable.css("z-index", 10).animate({
left: dragPos.left,
top: dragPos.top
});
}
});
});
</script>
</body>
</html>