Как я могу перетащить div id="draggablebutton"
, используя диапазон id="sidenavtiledrag"
, используя jQuery UI Draggable .
$(function() {
$("#sidenavtiledrag").focusin(function() {
$("#sidenavtile").draggable('enable', {
axis: "y"
});
$("#sidenavtiledrag").css('cursor', 'move')
$("#sidenavtiledrag").draggable('enable', {
axis: "y"
});
})
$("#sidenavtiledrag").focusout(function() {
$("#sidenavtile").draggable('disable', {
axis: "y"
});
$("#sidenavtiledrag").draggable('disable', {
axis: "y"
});
})
});
#sidenavtile {
z-index: 999;
position: fixed;
left: 0;
top: 30%;
width: 3em;
height: 2.3em;
background-color: white;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
#draggablebutton {
z-index: 999;
position: fixed;
left: 0;
top: 30%;
width: 10em;
height: 2.3em;
display: flex;
align-items: center;
justify-content: center;
}
#draggablebutton:hover>#sidenavtiledrag {
display: flex;
right: 0;
}
#sidenavtiledrag {
cursor: move;
z-index: 9999;
position: relative;
display: none;
left: 0;
width: 2em;
height: 2em;
float: right;
background-color: white;
/* border-top-right-radius: 15px; */
/* border-bottom-right-radius: 15px; */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 1s ease-in-out;
}
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div id="draggablebutton">
<span id="sidenavtile">
<i class="material-icons">menu</i>
</span>
<span id="sidenavtiledrag">
<i class="material-icons">unfold_more</i>
</span>
</div>