Newer
Older
<!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">
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;
}
.anotherClass {
margin: 15px;
padding: 15px;
border-radius: 5px;
text-align: center;
background-color: #5cb85c;
color: #fff;
width: 130px;
}
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<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="../extension/Resources/Public/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">
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<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 () {
var qfqPage = new QfqNS.QfqPage({
tabsId: 'myTabs',
formId: 'myForm',
submitTo: 'api/' + $("#submitTo").val(),
deleteUrl: 'api/' + $("#deleteUrl").val(),
fileUploadTo: 'api/' + $("#uploadTo").val(),
fileDeleteUrl: 'api/' + $("#fileDeleteUrl").val()
});
QfqNS.Log.level = 0;
var dragi = new QfqNS.DragAndDrop($('.qfq-dnd-sort'));
var zoni = new QfqNS.DragAndDrop($('.qfq-dnd'));
zoni.makeBasketCase();