diff --git a/js/main.js b/js/main.js index b19419e..fec3205 100644 --- a/js/main.js +++ b/js/main.js @@ -1,6 +1,6 @@ $(function() { //setup the draggable content containers - $(".content-container").draggable({ + $(".content-container-bounding-box").draggable({ "distance": 10, "handle": "h1", "helper": "clone", @@ -29,16 +29,15 @@ $(function() { "scope": "widget", "tolerance": "pointer", "drop": function(event, ui) { - $(event.target).css("background-color", ""); - console.log(["drop", event, ui]); + $("#draggable-temporary-clone").remove(); + $(ui.draggable[0]).prependTo(event.target); }, "over": function(event, ui) { - $(event.target).css("background-color", "hsla(0, 100%, 100%, 0.4);"); - console.log(["over", event, ui]); + $("#draggable-temporary-clone").remove(); + $(ui.draggable[0]).clone(true).attr("id", "draggable-temporary-clone").prependTo(event.target); }, "out": function(event, ui) { - $(event.target).css("background-color", ""); - console.log(["out", event, ui]); + $("#draggable-temporary-clone").remove(); } }); @@ -47,16 +46,15 @@ $(function() { "scope": "widget", "tolerance": "pointer", "drop": function(event, ui) { - $(event.target).css("background-color", ""); - console.log(["drop", event, ui]); + $("#draggable-temporary-clone").remove(); + $(ui.draggable[0]).insertAfter(event.target); }, "over": function(event, ui) { - $(event.target).css("background-color", "hsla(0, 100%, 50%, 0.4);"); - console.log(["over", event, ui]); + $("#draggable-temporary-clone").remove(); + $(ui.draggable[0]).clone(true).attr("id", "draggable-temporary-clone").insertAfter(event.target); }, "out": function(event, ui) { - $(event.target).css("background-color", ""); - console.log(["out", event, ui]); + $("#draggable-temporary-clone").remove(); } }); diff --git a/style/main.css b/style/main.css index c2c62a1..a0ea352 100644 --- a/style/main.css +++ b/style/main.css @@ -69,7 +69,7 @@ h5 { font-size: 11pt; } } .content-column { - padding: 2em 1em 2em 1em; + padding: 2em 1em 0em 1em; } .content-container-bounding-box {