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

[TASK] Implement basic drag&drop feature.

This commit is contained in:
Jan Philipp Timme 2013-09-11 16:25:43 +02:00
parent ec85bee1ac
commit 52f2f2bf54
2 changed files with 12 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
js/main.js
View File

@ -1,6 +1,6 @@
$(function() { $(function() {
//setup the draggable content containers //setup the draggable content containers
$(".content-container").draggable({ $(".content-container-bounding-box").draggable({
"distance": 10, "distance": 10,
"handle": "h1", "handle": "h1",
"helper": "clone", "helper": "clone",
@ -29,16 +29,15 @@ $(function() {
"scope": "widget", "scope": "widget",
"tolerance": "pointer", "tolerance": "pointer",
"drop": function(event, ui) { "drop": function(event, ui) {
$(event.target).css("background-color", ""); $("#draggable-temporary-clone").remove();
console.log(["drop", event, ui]); $(ui.draggable[0]).prependTo(event.target);
}, },
"over": function(event, ui) { "over": function(event, ui) {
$(event.target).css("background-color", "hsla(0, 100%, 100%, 0.4);"); $("#draggable-temporary-clone").remove();
console.log(["over", event, ui]); $(ui.draggable[0]).clone(true).attr("id", "draggable-temporary-clone").prependTo(event.target);
}, },
"out": function(event, ui) { "out": function(event, ui) {
$(event.target).css("background-color", ""); $("#draggable-temporary-clone").remove();
console.log(["out", event, ui]);
} }
}); });
@ -47,16 +46,15 @@ $(function() {
"scope": "widget", "scope": "widget",
"tolerance": "pointer", "tolerance": "pointer",
"drop": function(event, ui) { "drop": function(event, ui) {
$(event.target).css("background-color", ""); $("#draggable-temporary-clone").remove();
console.log(["drop", event, ui]); $(ui.draggable[0]).insertAfter(event.target);
}, },
"over": function(event, ui) { "over": function(event, ui) {
$(event.target).css("background-color", "hsla(0, 100%, 50%, 0.4);"); $("#draggable-temporary-clone").remove();
console.log(["over", event, ui]); $(ui.draggable[0]).clone(true).attr("id", "draggable-temporary-clone").insertAfter(event.target);
}, },
"out": function(event, ui) { "out": function(event, ui) {
$(event.target).css("background-color", ""); $("#draggable-temporary-clone").remove();
console.log(["out", event, ui]);
} }
}); });

2
style/main.css
View File

@ -69,7 +69,7 @@ h5 { font-size: 11pt; }
} }
.content-column { .content-column {
padding: 2em 1em 2em 1em; padding: 2em 1em 0em 1em;
} }
.content-container-bounding-box { .content-container-bounding-box {