JPT/dashboard
0
0
Fork 0
Code Issues Pull Requests Activity

[TASK] Improve drag&drop behaviour.

Browse Source
This commit is contained in:
Jan Philipp Timme 2013-09-12 15:23:02 +02:00
parent 5f515eb5bc
commit 374c1821f6
3 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -121,6 +121,10 @@
</div><!-- footer content --> </div><!-- footer content -->
</div><!-- footer --> </div><!-- footer -->
</div><!-- wrap-all --> </div><!-- wrap-all -->
<!-- templates -->
<div class="hidden">
<div class="droppable-container-placeholder"></div>
</div>
<!-- main javascript --> <!-- main javascript -->
<script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/main.js"></script>
</body> </body>

26
js/main.js
View File

@ -13,14 +13,14 @@ $(function() {
"revertDuration": 50, "revertDuration": 50,
"scope": "widget", "scope": "widget",
"scroll": false, "scroll": false,
"snap": true, "snap": false,
"start": function(event, ui) { "start": function(event, ui) {
//set width and height of dragged clone to originals dimensions //set width and height of dragged clone to originals dimensions
$(ui.helper[0]).width(event.target.clientWidth).height(event.target.clientHeight); $(ui.helper[0]).width(event.target.clientWidth).height(event.target.clientHeight);
//change opacity of original to indicate it is being dragged //change opacity of original to indicate it is being dragged
$(event.target).css("opacity", "0.3"); $(event.target).css("opacity", "0.25");
//also change opacity of dragged clone to help the user see //also change opacity of dragged clone to help the user see
$(ui.helper[0]).css("opacity", "0.3"); $(ui.helper[0]).css("opacity", "0.5");
}, },
"stop": function(event, ui) { "stop": function(event, ui) {
//reset opacity of original //reset opacity of original
@ -29,23 +29,31 @@ $(function() {
}); });
//setup the dropzones //setup the dropzones
//put the dragged object into first position of a column
$(".content-column").droppable({ $(".content-column").droppable({
"greedy": false, "greedy": false,
"scope": "widget", "scope": "widget",
"tolerance": "pointer", "tolerance": "pointer",
"drop": function(event, ui) { "drop": function(event, ui) {
$("#draggable-temporary-clone").remove(); $("#draggable-temporary-clone").remove();
$(ui.draggable[0]).prependTo(event.target); $(ui.draggable[0]).prependTo($(event.target));
}, },
"over": function(event, ui) { "over": function(event, ui) {
$("#draggable-temporary-clone").remove(); $("#draggable-temporary-clone").remove();
$(ui.draggable[0]).clone(true).attr("id", "draggable-temporary-clone").prependTo(event.target); //create a placeholder and mark it with an id (so we can remove it later)
$(".droppable-container-placeholder")
.clone(true)
.width(ui.draggable[0].clientWidth)
.height(ui.draggable[0].clientHeight)
.attr("id", "draggable-temporary-clone")
.prependTo(event.target);
}, },
"out": function(event, ui) { "out": function(event, ui) {
$("#draggable-temporary-clone").remove(); $("#draggable-temporary-clone").remove();
} }
}); });
//put the dragged object into a slot after the object it was dropped on
$(".content-container-bounding-box").droppable({ $(".content-container-bounding-box").droppable({
"greedy": true, "greedy": true,
"scope": "widget", "scope": "widget",
@ -56,7 +64,13 @@ $(function() {
}, },
"over": function(event, ui) { "over": function(event, ui) {
$("#draggable-temporary-clone").remove(); $("#draggable-temporary-clone").remove();
$(ui.draggable[0]).clone(true).attr("id", "draggable-temporary-clone").insertAfter(event.target); //create a placeholder and mark it with an id (so we can remove it later)
$(".droppable-container-placeholder")
.clone(true)
.width(ui.draggable[0].clientWidth)
.height(ui.draggable[0].clientHeight)
.attr("id", "draggable-temporary-clone")
.insertAfter(event.target);
}, },
"out": function(event, ui) { "out": function(event, ui) {
$("#draggable-temporary-clone").remove(); $("#draggable-temporary-clone").remove();

5
style/main.css
View File

@ -49,6 +49,10 @@ h5 { font-size: 11pt; }
clear: both; clear: both;
} }
.hidden {
display: none;
}
.vertical-list { .vertical-list {
list-style: none; list-style: none;
clear: left; clear: left;
@ -70,6 +74,7 @@ h5 { font-size: 11pt; }
.content-column { .content-column {
padding: 2em 1em 0em 1em; padding: 2em 1em 0em 1em;
min-height: 300px;
} }
.content-container-bounding-box { .content-container-bounding-box {