-
Carsten Rose authoredUpdate Mockup files to get CSS & JS files from their own directory structure (not an installed QFQ extension).
Carsten Rose authoredUpdate Mockup files to get CSS & JS files from their own directory structure (not an installed QFQ extension).
dragAndDrop.html 6.02 KiB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
.anyClass {
height: 40px;
background-color: #5cb85c;
line-height: 40px;
color: white;
text-align: center;
}
.someClass {
min-height: 160px;
width: 160px;
border: 1px dashed #ccc;
margin: 15px;
padding-bottom: 30px;
}
.anotherClass {
margin: 15px;
padding: 15px;
border-radius: 5px;
text-align: center;
background-color: #5cb85c;
color: #fff;
width: 130px;
}
</style>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../css/jqx.base.css">
<link rel="stylesheet" href="../css/jqx.bootstrap.css">
<link rel="stylesheet" href="../css/qfq-bs.css">
<title>Input Mode Switcher</title>
</head>
<body style="background-color: #f5f5f5;">
<div class="container-fluid">
<div class="row">
<div class="col-md-10 ">
<div class="btn-toolbar pull-right" role="toolbar">
<div class="btn-group" role="group">
<button id="save-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-ok"></span></button>
<button id="close-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="btn-group" role="group">
<button id="delete-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-trash"></span></button>
</div>
<div class="btn-group" role="group">
<a id="form-new-button" href="personmock.html?s=badcaffe1" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-plus"></span></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="qfq-dnd-sort" data-dnd-api="http://something/bla">
<div class="anyClass" id="e1" data-dnd-id="uno" data-dnd-value="10">
Numbero Uno
</div>
<div class="anyClass" id="e2" data-dnd-id="deux">
Numbero Deux
</div>
<div class="anyClass" id="e3" data-dnd-id="tre">
Numbero Tre
</div>
<div class="anyClass" id="e4" data-dnd-id="quattro">
Numbero Quattro
</div>
<div class="anyClass" id="e5" data-dnd-id="cinge">
Numbero Cinge
</div>
<div class="anyClass" id="e6" data-dnd-id="siesta">
Numbero Siesta
</div>
</div>
<h2>Table</h2>
<table class="table table-hover">
<tbody class="qfq-dnd-sort"
data-dnd-api="typo3conf/ext/qfq/qfq/Api/dragAndDrop.php?s=5b15109182850"
data-columns="3">
<tr id="table-125" data-dnd-id="125">
<td>125</td>
<td>eins</td>
<td>10</td>
</tr>
<tr id="table-126" data-dnd-id="126">
<td>126</td>
<td>zwei</td>
<td>20</td>
</tr>
<tr id="table-128" data-dnd-id="128">
<td>128</td>
<td>vier</td>
<td>30</td>
</tr>
<tr id="table-127" data-dnd-id="127">
<td>127</td>
<td>drei</td>
<td>40</td>
</tr>
</tbody>
</table>
<hr>
<h2>Playing with baskets</h2>
<div class="qfq-dnd" style="margin-top: 20px;"
data-dnd-api="http://somethingelse/bla"c
data-dnd-dropzone="someClass"
data-dnd-element="anotherClass"
>
<div class="col-md-6">
<div class="someClass" id="dz1">
</div>
<div class="someClass" id="dz2">
</div>
</div>
<div class="col-md-6">
<div class="anotherClass" id="d1">
Somebody
</div> <div class="anotherClass" id="d2">
Otherbody
</div>
<div class="anotherClass" id="d3">
Thatbody
</div>
<div class="anotherClass" id="d4">
Not me
</div>
<div class="anotherClass" id="d5">
Otherguy
</div>
</div>
</div>
</div>
</div>
</div>
<p><br></p>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/validator.min.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<script type="text/javascript">
$(function () {
$('.qfq-dnd-sort').each(function() {
var dndObject = new QfqNS.DragAndDrop($(this));
dndObject.makeSortable();
});
$('.qfq-dnd').each(function() {
var zoni = new QfqNS.DragAndDrop($(this));
zoni.makeBasketCase();
});
});
</script>
</body>
</html>