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

[TASK] Improve drag&drop behaviour.

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 -->
</div><!-- wrap-all -->
<!-- templates -->
<div class="hidden">
<div class="droppable-container-placeholder"></div>
</div>
<!-- main javascript -->
<script type="text/javascript" src="js/main.js"></script>
</body>

26
js/main.js
View File

@ -13,14 +13,14 @@ $(function() {
"revertDuration": 50,
"scope": "widget",
"scroll": false,
"snap": true,
"snap": false,
"start": function(event, ui) {
//set width and height of dragged clone to originals dimensions
$(ui.helper[0]).width(event.target.clientWidth).height(event.target.clientHeight);
//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
$(ui.helper[0]).css("opacity", "0.3");
$(ui.helper[0]).css("opacity", "0.5");
},
"stop": function(event, ui) {
//reset opacity of original
@ -29,23 +29,31 @@ $(function() {
});
//setup the dropzones
//put the dragged object into first position of a column
$(".content-column").droppable({
"greedy": false,
"scope": "widget",
"tolerance": "pointer",
"drop": function(event, ui) {
$("#draggable-temporary-clone").remove();
$(ui.draggable[0]).prependTo(event.target);
$(ui.draggable[0]).prependTo($(event.target));
},
"over": function(event, ui) {
$("#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) {
$("#draggable-temporary-clone").remove();
}
});
//put the dragged object into a slot after the object it was dropped on
$(".content-container-bounding-box").droppable({
"greedy": true,
"scope": "widget",
@ -56,7 +64,13 @@ $(function() {
},
"over": function(event, ui) {
$("#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) {
$("#draggable-temporary-clone").remove();

5
style/main.css
View File

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