We Keep Coding

Show Guides and do snapping while dragging jquery draggable divs

If there are multiple jquery draggable divs I want to see guides and snap to guides, edges and corners of others divs.
Here's the code:
$(".draggable").draggable();
$(".draggable").resizable();
body {
font-family: courier new, courier;
font-size: 12px;
}
.draggable {
border: 1px solid #ccc;
width: 100px;
height: 80px;
cursor: move;
position: relative;
}
.guide {
display: none;
position: absolute;
left: 0;
top: 0;
}
#guide-h {
border-top: 1px dashed #55f;
width: 100%;
}
#guide-v {
border-left: 1px dashed #55f;
height: 100%;
}
#image{
height: 150px;
width: 200px;
}
img{
width: 100%;
height: 100%;
}
#image_h {
position: absolute;
color: white;
top: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
<div class="draggable">drag me!</div>
<div class="draggable">you can drag me too, if you like</div>
<div class="draggable">hep hep</div>
<div class="draggable" id="image">
<img src="https://cdn.pixabay.com/photo/2021/02/06/16/29/jay-5988657__340.jpg">
<div id="image_h">
Hello
</div>
</div>
<div id="guide-h" class="guide"></div>
<div id="guide-v" class="guide"></div>
The blue line in following image is what i want to be shown while divs are being dragged
see image here. Divs should snap to the blue guiding lines when divs are aligned.
don't change the relative and absolute position of classes as I've used them to overlay one div on another.
I tried searching online but solutions are too old, awakward and work with jquery 2.x
Please help!

To address the first part of your question, you can manage the guides like so.
$(function() {
function moveGuides(top, left) {
$("#guide-h").css("top", top + "px");
$("#guide-v").css("left", left + "px");
}
function getMyCorners(el) {
var p = $(el).position();
return {
top: p.top,
left: p.left,
bottom: p.top + $(el).height(),
right: p.left + $(el).width()
};
}
function startGuides(targetEl) {
var c = getMyCorners(targetEl);
moveGuides(c.top, c.right);
$(".guide").show();
}
function stopGuides() {
$(".guide").hide();
}
$(".draggable").draggable({
start: function(e, ui) {
startGuides(this);
},
drag: function(e, ui) {
var c = getMyCorners(this);
moveGuides(c.top, c.right);
},
stop: stopGuides
});
$(".draggable").resizable({
start: function(e, ui) {
startGuides(this);
},
resize: function(e, ui) {
var c = getMyCorners(this);
moveGuides(c.top, c.right);
},
stop: stopGuides
});
});
body {
font-family: courier new, courier;
font-size: 12px;
}
.draggable {
border: 1px solid #ccc;
width: 100px;
height: 80px;
cursor: move;
position: relative;
}
.guide {
display: none;
position: absolute;
left: 0;
top: 0;
}
#guide-h {
border-top: 1px dashed #55f;
width: 100%;
}
#guide-v {
border-left: 1px dashed #55f;
height: 100%;
}
#image {
height: 150px;
width: 200px;
}
img {
width: 100%;
height: 100%;
}
#image_h {
position: absolute;
color: white;
top: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<div class="draggable">drag me!</div>
<div class="draggable">you can drag me too, if you like</div>
<div class="draggable">hep hep</div>
<div class="draggable" id="image">
<img src="https://cdn.pixabay.com/photo/2021/02/06/16/29/jay-5988657__340.jpg">
<div id="image_h">
Hello
</div>
</div>
<div id="guide-h" class="guide"></div>
<div id="guide-v" class="guide"></div>
With helper functions, you can reveal the guides, and move them based on specific events.
The next, and much more involved portion, would be to create collision detection for the various elements. This will require checking against each of the elements involved against all the other elements. For example:
if($("#guide-h").position().top == $(".draggable").position().top){
// Stop event
}
I am guessing that you are looking to create alignment. So when a Guide collides with an edge, it should prevent the User from dragging or resizing the element further in that direction. Also, do you want it to Snap and what tolerance should that snap be?
Since you did not provide those details, I am not really able to address your second question in full.

Drag and Drop from localstorage HTML5 not working

I have created a web page with drag and drop features for some of the elements.
Once the drag and drop are done, I store the elements which are in the droppable area in the local storage of the browser.
Later when the page is accessed again, I take the values from local storage and restore them on the web page.
After I restore, I couldn't drag the elements in the droppable area within its containment. Could anyone please help? Below is the code I have used.
Here is the link to FIDDLE
HTML
×
Battery Voltage
<div class="left_flight floatleft ui-widget-content">
<a class="boxclose displayblock">×</a>
<p>Flight Time Left</p>
<div class="flightLeft"></div>
</div>
<div class="cnt_flight floatleft ui-widget-content">
<a class="boxclose displayblock">×</a>
<p>Current Flight Time</p>
<div class="curFlight"></div>
</div>
<div style="clear:both"></div>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</div>
JS:
$(function() {
if (localStorage.length > 0) {
for (var i = 0; i < localStorage.length; i++) {
var dropClass = localStorage.key(i);
var clonediv = $("." + dropClass.substr(4, dropClass.length - 4)).clone();
var droppable = $("#droppable");
clonediv.appendTo(droppable);
clonediv
//.draggable({ revert: false, grid: [30, 30], scroll: true })
//.sortable()
.resizable({
containment: "#droppable"
});
clonediv.find('a').removeClass("displayblock").click(function() {
var par = $(this).parent();
var id = par.attr("class").split(' ');
var droppable = $("#droppable");
var removing = droppable.find("." + id[0]);
removing.remove();
localStorage.removeItem("drop" + id[0]);
});
}
} else {}
$(".bat_voltage").draggable({
revert: true,
grid: [30, 30],
scroll: true
});
$(".left_flight").draggable({
revert: true,
grid: [30, 30],
scroll: true
});
$(".cnt_flight").draggable({
revert: true,
grid: [30, 30],
scroll: true
});
$("#droppable").droppable({
drop: function(event, ui) {
var dragged = ui.draggable;
var id = dragged.attr("class").split(' ');
var droppable = $("#droppable");
var findElement = (droppable.find("." + id[0]));
if (findElement.length != 0) {} else {
ui.helper.css({
'top': 0,
'left': 0,
'position': 'relative'
});
ui.helper.clone()
.appendTo(droppable)
.draggable({
containment: "#droppable",
grid: [30, 30],
snap: true
})
.resizable({
containment: "#droppable"
}).sortable({
revert: false
});
droppable.find("." + id[0]).find('a').removeClass("displayblock").click(function() {
var par = $(this).parent();
var id = par.attr("class").split(' ');
var droppable = $("#droppable");
var removing = droppable.find(findElement);
removing.remove();
localStorage.removeItem("drop" + id[0]);
});
localStorage.setItem("drop" + id[0], droppable);
}
}
});
});
CSS:
.bat_voltage { width: 250px; height: 100px; padding: 0.5em; margin: 10px 10px 10px 0; z-index: 1; }
.floatleft { float: left; }
.left_flight { width: 250px; height: 100px; padding: 0.5em; margin: 10px 10px 10px 0; z-index: 1; }
.cnt_flight { width: 250px; height: 100px; padding: 0.5em; margin: 10px 10px 10px 0; z-index: 1; }
#droppable { width: 50%; height: 400px; padding: 0.5em; margin: 10px; resize: both; border: 2px; overflow: auto; }
#progressbar { width: 200px; height: 50px; margin-top: 20px; }
a.boxclose { float: right; margin-top: -10px; margin-right: -10px; cursor: pointer; color: #fff; border: 1px solid #AEAEAE; border-radius: 8px;
background: #605F61; font-size: 21px; font-weight: bold; display: inline-block; line-height: 0px; padding: 8px 3px; display: block; }
.displaynone { display: none !important; }
.displayblock { display: none !important; }

It must be somehow caused by the element not being dragged into the droppable area, making the revert parameter active because of this. Not sure how to solve this better than by just disabling it for the elements present inside it at the start:
$('#droppable .ui-draggable').draggable( "option", "revert", false );
Working FIDDLE

jQuery hamburger menu - multiple events called

$( document ).on( "vclick", '#icon', function() {
$("#navigation").animate({height: 'toggle'}, 600, "linear");
});
Hello,
I currently have a hamburger menu that works perfectly except for one thing. If I click the #icon 10 times, it will execute the code 10 times, I wonder if its possible to make it only clickable when its finished and remove the whole queue system.
Thanks in advance.

You could probably do something in the lines of this:
JavaScript
var animating = false;
$(document).on( "vclick", '#icon', function() {
if(!animating) {
animating = true;
$("#navigation").animate({height: 'toggle'}, 600, "linear", function() {
animating = false;
});
}
});

You could use a workaround by hidding the #icon until the animation done then show it again :
$( document ).on( "vclick", '#icon', function() {
var _this = $(this);
//Hide the icon
$(this).hide();
$("#navigation").animate({height: 'toggle'}, 600, "linear", function() {
//Show the icon after animation
_this.show();
});
});
Hope this helps.

Using Arg0n's answer as inspiration, I have created a jQuery plugin.
The plugin used closure which means that the function returns another function so that variables are scoped inside, rather than outside; in the global scope.
(function($) {
$.fn.collapser = function(targetSelector, ms, type) {
this.on('click', function() {
var animating = false;
return (function() {
if (!animating) {
animating = true;
$(targetSelector).animate({
height: 'toggle'
}, ms, type, function() {
animating = false;
});
}
}());
});
}
}(jQuery))
$('#icon').collapser('#navigation', 600, 'linear');
body {
background: #222;
}
#page {
background: #DDD;
}
#icon {
width: 4em;
height: 4em;
line-height: 4em;
text-align: center;
margin-bottom: 1em;
background: #446;
color: #FFF;
font-weight: bold;
cursor: pointer;
border: thin solid #AAD;
}
ul#navigation {
list-style-type: none;
margin: 0;
padding: 0.25em;
background: #E7E7F7;
}
ul#navigation li {
display: inline-block;
width: 6em;
height: 2.5em;
line-height: 2.5em;
margin: 0;
padding: 0;
text-align: center;
background: #F7F7FF;
}
#content {
background: #FFF;
padding: 1em;
height: 50vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
<div id="icon">Icon</div>
<ul id="navigation">
<li>Home</li>
<li>Articles</li>
<li>Historic</li>
<li>About</li>
<li>Contact</li>
</ul>
<div id="content">
Hello World
</div>
</div>
You could also unbind and re-bind the event. This way you don't have to create any state variables. This may be the best way to handle this.
(function($) {
$.fn.collapser = function(targetSelector, ms, type) {
var eventName = 'click';
var fn = function(source) {
$(source).unbind(eventName, fn);
$(targetSelector).animate({
height: 'toggle'
}, ms, type, function() {
$(source).bind(eventName, fn);
});
};
this.on(eventName, function() {
fn.call(this);
});
}
}(jQuery))
$('#icon').collapser('#navigation', 1600, 'linear');
body {
background: #222;
}
#page {
background: #DDD;
}
#icon {
width: 4em;
height: 4em;
line-height: 4em;
text-align: center;
margin-bottom: 1em;
background: #446;
color: #FFF;
font-weight: bold;
cursor: pointer;
border: thin solid #AAD;
}
ul#navigation {
list-style-type: none;
margin: 0;
padding: 0.25em;
background: #E7E7F7;
}
ul#navigation li {
display: inline-block;
width: 6em;
height: 2.5em;
line-height: 2.5em;
margin: 0;
padding: 0;
text-align: center;
background: #F7F7FF;
}
#content {
background: #FFF;
padding: 1em;
height: 50vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
<div id="icon">Icon</div>
<ul id="navigation">
<li>Home</li>
<li>Articles</li>
<li>Historic</li>
<li>About</li>
<li>Contact</li>
</ul>
<div id="content">
Hello World
</div>
</div>

div not retaining CSS attribute on click()

I have a function that creates a grid of divs that are generated and sent to a container div when the document loads (or when the user resets it). When one hovers over the divs, they highlight (change color). When the user clicks the highlighted div, it changes to black. For some reason, the div that was black reverts back to the original color when I hover over a different div. I'm puzzled as to why that is. Any help or guidance would be greatly appreciated. Here's my jsfiddle example: https://jsfiddle.net/psyonix/1g9p59bx/79/
var d = ("<div class='square'></div>");
function createGrid(numSquares) {
var area = $('#g_area');
var squareSize = Math.floor(area.innerWidth() / numSquares);
for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
area.append(d);
}
$('.square')
.height(squareSize)
.width(squareSize)
.hover(
function () {
$(this).css({
'background-color': '#FFFFFF'
});
}, function () {
$(this).css({
'background-color': '#C8C8C8'
});
})
.click(
function () {
$(this).css({
'background-color': '#000000'
});
});
}
function resetGrid() {
$(".square").remove();
}
$(document).ready(function () {
createGrid(8);
$("#button").click(function () {
var numSquares = prompt("Please enter the size");
resetGrid(numSquares);
createGrid(numSquares);
});
});

Once you click on a DIV, you should maintain a flag that tells you hover function to stop changing colors
$('.square')
.height(squareSize)
.width(squareSize)
.hover(
function () {
if ($(this).data("clicked")) return; //ADDED LINE
$(this).css({
'background-color': '#FFFFFF'
});
}, function () {
if ($(this).data("clicked")) return; //ADDED LINE
$(this).css({
'background-color': '#C8C8C8'
});
})
.click(
function () {
$(this).data("clicked", true); //ADDED LINE
$(this).css({
'background-color': '#000000'
});
});

it changed because of hover function.
https://jsfiddle.net/1g9p59bx/82/
$('.square')
.height(squareSize)
.width(squareSize)
.hover(
function () {
if($(this).hasClass('active'))return;
$(this).css({
'background-color': '#FFFFFF'
});
}, function () {
if($(this).hasClass('active'))return;
$(this).css({
'background-color': '#C8C8C8'
});
})
.click(
function () {
$(this).addClass('active');
$(this).css({
'background-color': '#000000'
});
});

For some reason, the div that was black reverts back to the original color when I hover over a different div
Not quite. It reverts to the original colour when you leave the current div, because that's what you tell it in the second argument to $('.square').hover. You would need to remember that the square was clicked, and build extra logic into the "unhover" function.
Fortunately, there is an easier way: use CSS. Note the very bottom of the CSS definitions.
var d = ("<div class='square'></div>");
function createGrid(numSquares) {
var area = $('#g_area');
var squareSize = Math.floor(area.innerWidth() / numSquares);
for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
area.append(d);
}
$('.square')
.height(squareSize)
.width(squareSize)
.click(function () {
$(this).addClass('clicked');
});
}
function resetGrid() {
$(".square").remove();
}
$(document).ready(function () {
createGrid(8);
$("#button").click(function () {
var numSquares = prompt("Please enter the size");
resetGrid(numSquares);
createGrid(numSquares);
});
});
.container {
background-color: #252525;
width: 600px;
height: 700px;
margin: 0 auto;
border-radius: 5px;
}
.inner {
background-color: #C8C8C8;
position: absolute;
width: 580px;
height: 600px;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
border-radius: 5px;
}
.knob {
background-color: #575759;
width: 60px;
height: 60px;
border-radius: 60px;
}
#left_b {
position: absolute;
margin-left: 30px;
margin-top: 625px;
margin-bottom: 10px;
}
#button {
position: absolute;
margin-left: 265px;
margin-top: 640px;
margin-bottom: 10px;
}
#right_b {
position: absolute;
margin-left: 510px;
margin-top: 625px;
margin-bottom: 10px;
}
#g_area {
background-color: #C8C8C8;
position: relative;
width: 580px;
height: 600px;
margin-right: auto;
margin-left: auto;
margin-top: auto;
border-radius: 5px;
overflow: hidden;
}
.square {
display: inline-block;
position: relative;
margin: 0 auto;
}
.highlight {
background-color: #FFFFFF;
outline: #C8C8C8;
outline: 1px;
outline: solid;
margin: 0 auto;
}
.square {
background-color: #C8C8C8;
}
.square:hover {
background-color: #FFFFFF;
}
.square.clicked {
background-color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="outer">
<div class="inner">
<div id="g_area"></div>
</div>
<div class="knob" id="left_b"></div>
<div id="button">
<button>RESET</button>
</div>
<div class="knob" id="right_b"></div>
</div>
</div>
</body>

Trouble with the CSS to change start position on a slider

I'm very new to CSS and Javascript, and as a sort of project have been working on a slider that moves in two directions, both horizontally and vertically. I've used this guide as a model, and have something that is mostly serviceable.
However, I'd like for the slider to 'begin' not at the standard point of origin (that is, the left-most and upper-most slide) but at a different, customizable point--for instance, the horizontal and vertical centermost of the available slides--and nothing I try helps me to do this. I've played around with margins, positions and padding, but everything only messes the slider up. Does anyone have an idea for how I can change the slide that is showing on pageload?
Here's the CSS that I have so far:
.testprojbody
{
background-color: black;
padding: 0;
overflow: hidden;
}
.slider-holder
{
width: 98%;
height: 665px;
border: 2px black solid;
background-color: white;
float: center;
margin-left: 9px;
}
.slider
{
width: 987px;
height: 610px;
overflow: hidden;
float:center;
margin-top: 25px;
border: 2px black solid;
margin-left: 35px;
}
.holder
{
width: 200%;
height: 200%;
position: relative;
}
.slide
{
float: left;
width: 987px;
height: 610px;
position: relative;
}
.slider-navright
{
text-align: center;
margin: 310px 0 0 1030px;
position: absolute;
}
.slider-navright a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 20px solid #999;
}
.slider-navleft {
text-align: center;
margin: 310px 0 0 12px;
position: absolute;
}
.slider-navleft a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-right: 20px solid #999;
}
.slider-navtop {
text-align: center;
margin: 2px 0 0 501px;
position: absolute;
}
.slider-navtop a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 20px solid #999;
}
.slider-navbot {
text-align: center;
margin: 642px 0 0 501px;
position: absolute;
}
.slider-navbot a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 20px solid #999;
}
Here's the Javascript, which allows for nav & animation and so on:
<script type="text/javascript">
var positionH = 0
var positionV = 0
$(document).ready(function(){
var slider = {
el: {
slider: $("#slider"),
allSlides: $(".slide"),
sliderNavRight: $(".slider-navright"),
sliderNavLeft: $(".slider-navleft"),
sliderNavTop: $(".slider-navtop"),
sliderNavBot: $(".slider-navbot"),
},
timing: 400,
slideWidth: 987,
slideHeight: 610,
// In this simple example, might just move the
// binding here to the init function
init: function() {
this.bindUIEvents();
},
bindUIEvents: function() {
// nav code
this.el.sliderNavRight.on("click", "a", function(event) {
slider.handleNavRightClick(event, this);
});
this.el.sliderNavLeft.on("click", "a", function(event) {
slider.handleNavLeftClick(event, this);
});
this.el.sliderNavTop.on("click", "a", function(event) {
slider.handleNavTopClick(event, this);
});
this.el.sliderNavBot.on("click", "a", function(event) {
slider.handleNavBotClick(event, this);
});
},
handleNavRightClick: function(event, el) {
positionH+=1;
event.preventDefault();
this.el.slider.animate({
scrollLeft: this.slideWidth * positionH
}, this.timing);
},
handleNavLeftClick: function(event, el) {
positionH-=1;
event.preventDefault();
this.el.slider.animate({
scrollLeft: this.slideWidth * positionH
}, this.timing);
},
handleNavTopClick: function(event, el) {
event.preventDefault();
positionV--;
this.el.slider.animate({
scrollTop: this.slideHeight * positionV
}, this.timing);
},
handleNavBotClick: function(event, el) {
event.preventDefault();
positionV++;
this.el.slider.animate({
scrollTop: this.slideHeight * positionV
}, this.timing);
},
};
slider.init();});
</script>
<script type="text/javascript">
//arrow functions
$(document.documentElement).keydown(function(event){
if (event.keyCode == 39){
//go right
event.preventDefault();
$('.slider-navright a')
.click();
} else if (event.keyCode == 37){
//go left
event.preventDefault();
$('.slider-navleft a')
.click();
} else if (event.keyCode == 38){
//go up
event.preventDefault();
$('.slider-navtop a')
.click();
} else if (event.keyCode == 40){
//go down
event.preventDefault();
$('.slider-navbot a')
.click();
}
});
// makes slider unselectable AND makes arrow nav work better
$(".slider").disableSelection();
</script>
and here's the relevant HTML:
<body class="testprojbody">
<div class="slider-holder">
<div class="slider" id="slider">
<div class="holder">
<div class="slide" id="slide-x0y0"></div>
<div class="slide" id="slide-x1y0"></div>
<div class="slide" id="slide-x0yA"></div>
<div class="slide" id="slide-x0y0"></div>
</div>
</div>
<nav class="slider-navright">
Move Right
</nav>
<nav class="slider-navleft">
Move Left
</nav>
<nav class="slider-navtop">
Move Up
</nav>
<nav class="slider-navbot">
Move Down
</nav>
</div>
</body>
</html>
Hope this is comprehensible, as I said, I'm very new (only picked up javascript about two weeks ago, and html maybe a month and a half ago), so I'm sure this is very sloppy, roundabout code. Still, if anyone could help, it would be much appreciated!
Thanks.

Looks like the first lines on your JavaScript could be what you're looking for.
Have you tried changing the values of
var positionH = 0
var positionV = 0
to the positions you want?
EDIT
Okay so following on you can use those variables you'll just need to add a little more code to your init method...
init: function() {
this.bindUIEvents();
this.el.slider.scrollLeft(positionH);
this.el.slider.scrollTop(positionV);
}
Then change the positionH and positionV variables.