on
drag floating menu
drag floating menu
728x90
반응형
floating menu
html,body,#wrap{min-height:100%; height:100%;}
a {text-decoration: none;}
*{padding:0; margin:0}
.dragContainer{position:relative; width:100%; background:#f9f9f9;}
.draggable{display: inline-block; width:50px; height:50px;text-align:center; line-height:50px;}
.drag_area{position: fixed; bottom:50px; right:50px;}
.drag_area img{width:50px; height:50px;}
.drag_area .d_menu{position: relative; display: block; width:100%; height:100%; color: #fff; font-size: 50px; line-height:40px; z-index: 10;}
.drag_area .menus{ position: absolute;top:0px; width:50px; height:50px; z-index: 5; box-sizing: border-box; transition: all 0.25s ease-in-out; opacity: 0; }
.drag_area .menus a{display: block;}
.drag_area .d_menu img{/* box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .2); */ transform: rotate(0deg); transition: all 0.25s ease-out;}
.drag_area.on .d_menu img{transform: rotate(315deg);}
.drag_area.down.on .menus.m1{opacity: 1; top:60px}
.drag_area.down.on .menus.m2{opacity: 1; top:120px}
.drag_area.down.on .menus.m3{opacity: 1; top:180px}
.drag_area.up.on .menus.m1{opacity: 1; top:-60px}
.drag_area.up.on .menus.m2{opacity: 1; top:-120px}
.drag_area.up.on .menus.m3{opacity: 1; top:-180px}
.d_shadow{}
.d_shadow:after{content:"";display: block; position: absolute; top:0; width:49px; height:49px;border-radius: 50%; box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, .4); }
$(function () {
var wrap_height_half;
$( ".draggable" ).draggable({
start:function(event, ui ) {
//console.log("start")
$( ".draggable" ).addClass("draging")
},
containment:".dragContainer"//영역 한정 드레그
});
$( ".dragContainer" ).droppable({
drop: function( event, ui ) {
wrap_height_half = warp_half();
setTimeout(function(){
$( ".draggable" ).removeClass("draging");
menu_transfrom()
console.log("draging 드레그중 제거")
},5)
}
});
// wrap 높이 / 2
function warp_half(){
var wh = $( ".dragContainer" ).height() / 2
return wh;
}
function menu_transfrom(){
//메뉴 위치 변경 관련
console.log("메뉴위치변경")
if($(".drag_area").hasClass("on")){
if($(".draggable").position().top > wrap_height_half){
console.log("메뉴가 하단에 위치할때 up")
$(".draggable").removeClass("down").addClass("up")
}else{
console.log("메뉴가 상단에 위치할때 up x")
$(".draggable").removeClass("up").addClass("down")
}
}
}
$(window).load(function(){
wrap_height_half = warp_half();
//console.log(wrap_height_half)
})
$(window).resize(function(){
wrap_height_half = warp_half();
//console.log(wrap_height_half)
})
//메뉴 더보기 클릭시
$(".d_menu").off("click").on('click', function() {
if(!$(".draggable" ).hasClass("draging")){
console.log("click")
$(".drag_area").toggleClass("on")
// if( $(".drag_area").hasClass("on")){
// $(".d_menu").html("-")
// }else{
// $(".d_menu").html("+")
// }
}else{
console.log("드레그중")
}
menu_transfrom()
})
});
728x90
반응형
from http://netfolder.tistory.com/276 by ccl(A) rewrite - 2021-10-12 13:28:05