In my project, I have set up 2 divs that are positioned alongside each other, with a background div referred to as the "bg div". Upon selecting one of the divs, the bg div transitions on top of the selected one, creating a segmented controller effect.
Now, my next objective is to make the bg div draggable. If it is dragged but not all the way to either side, it should snap to the side where it is mostly positioned.
I am aiming for functionality similar to this: https://i.sstatic.net/XBhjK.gif
However, when I tried to implement the draggable feature (using JQuery UI) and set z-index to -1, the div stopped being draggable. It also didn't snap to the sides efficiently unless dragged completely. Additionally, there was an odd delay in dragging due to the transition effect.
Issues:
- How can I enable draggability with z-index set to -1?
- How can I ensure the div snaps accurately to the dominant side?
- How can I avoid the weird dragging behavior caused by the transition?
Links to demos: JSFiddle without issues JSFiddle with issues
$('#bckgrnd').draggable({
axis: "x",
containment: "parent",
snap: ".labels"
});#radios {
position: relative;
width: 370px;
}
input {
display: none;
}
#bckgrnd,
#bckgrndClear,
.labels {
width: 50%;
height: 30px;
text-align: center;
display: inline-block;
float: left;
padding-top: 10px;
cursor: pointer;
}
.labels {
outline: 1px solid green;
}
#bckgrnd {
background-color: orange;
position: absolute;
left: 0;
top: 0;
transition: left linear 0.3s;
}
#rad1:checked ~ #bckgrnd {
left: 0;
}
#rad2:checked ~ #bckgrnd {
left: 50%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="radios">
<input id="rad1" type="radio" name="radioBtn" checked>
<label class="labels" for="rad1">First Option</label>
<input id="rad2" type="radio" name="radioBtn">
<label class="labels" for="rad2">Second Option</label>
<div id="bckgrnd"></div>
</div>