We Keep Coding

jQuery - Making a DIV both .draggable and .droppable

I was toying about on jsFiddle and was wondering at all if it was possible to make an object both .draggable and .droppable, for example so that I would be able to make it so that Div.1 could be dropped onto Div.2 and vice versa.
My jQuery
$(function() {
$( "#draggable" ).draggable({revert: true, snap: 'inner'});
$( "#droppable" ).droppable({
drop: function( event, ui ) {
var one = $(this).html();
var two = ui.draggable.html();
$(this).html(two);
ui.draggable.html(one);
}
});
});
and My HTML
<div id="draggable droppable">16.00 - 17.00</div></br>
<div id="droppable draggable">13.00 - 14.00</div></br>
<div id="draggable droppable">14.00 - 15.00</div></br>
<div id="droppable draggable">09.00 - 10.00</div></br>
<div id="draggable droppable">07.00 - 08.00</div></br>
<div id="droppable draggable">18.00 - 19.00</div></br>
Any ideas anybody? Thanks!

Try using classes instead of id's when using them more then once as id's can only be used once
also you cannot use 2 id's on 1 element.

i correct your code. problem is you use id, id is unique in html page when we use those id in java script. I replace those id with class.
$(function() {
$( ".draggable" ).draggable({revert: true, snap: 'inner'});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
var one = $(this).html();
var two = ui.draggable.html();
$(this).html(two);
ui.draggable.html(one);
}
});
});
<div class="draggable droppable">16.00 - 17.00</div></br>
<div class="droppable draggable">13.00 - 14.00</div></br>
<div class="draggable droppable">14.00 - 15.00</div></br>
<div class="droppable draggable">09.00 - 10.00</div></br>
<div class="draggable droppable">07.00 - 08.00</div></br>
<div class="droppable draggable">18.00 - 19.00</div></br>

Put transition to hover in jquery

I have this script in jquery which makes a hover image (in the hover replaces the images) .
The specific question is how do I place a transition ?
$( "figure.salud img" ).hover(
function() {
$( this ).attr("src","img/salud5.jpg");
},function() {
$( this ).attr("src","img/salud5-gris.jpg");
}
);

Are you looking for something as this ,do let me know if something else was expected!
$( ".salud img" ).hover(
function() {
$( this ).fadeOut(0).attr("src","https://pmcdeadline2.files.wordpress.com/2014/06/yahoo-logo.jpg").fadeIn(500);
},function() {
$( this ).fadeOut(0).attr("src","http://velocityagency.com/wp-content/uploads/2013/08/go.jpg").fadeIn(500);
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="salud">
<img src="http://velocityagency.com/wp-content/uploads/2013/08/go.jpg" width="160" height="160"/>
</div>
JS FIDDLE: https://jsfiddle.net/nhwuh7pb/9/

JQuery - Adding class onto element, and then interacting with that class doesn't work

When you click ( ".toggle-button a" ), it adds .close class to itself. And fades in .info-overlay
This works fine, but when you click it again, I want info-overlay to fade out again, and the close class to be removed. But this doesn't work.
Am I missing something here?
http://jsfiddle.net/bazzle/xpS9P/1/
html
<div class="toggle-button">
<a>click</a>
</div>
<div class="info-overlay">
content
</div>
css
.info-overlay{
display:block;
width:100px;
height:100px;
background-color:green;
display:none;
};
js
$( ".toggle-button a" ).click(function() {
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
});
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});

Use event delegation:
Change
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
to:
$(document).on('click',".toggle-button a.close",function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
Because a .click() is attach and forget handler, but .on() is dynamic.

see updated Fiddle
$( ".toggle-button a" ).click(function() {
if($(this).hasClass('close')){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
}else{
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
}
});
reference hasClass()

You could use delegation or just set your logic as following:
DEMO
$(".toggle-button a").click(function () {
$(".info-overlay").fadeToggle(500).toggleClass('close');
});

jQuery: Changing div ID not working

I'm back already and google-fu has brought me nothing.
I'm trying to make a sort of image gallery and i need to reset the divs dynamically on my slider but I'm having no luck, here's the process:
click 'left'
left div moves forward.
central divs ID gets called 'left' and vice versa, (using a temp ID to stop two divs having the same ID)
the css is reset as if it never happened except for the image being different.
My problem is that they seem to be resetting completely to their original state, as if the ID change never happened, any ideas?
Here's the JSFiddle
and here's the offending code:
$('.navigationLeft').click(function() {
console.log("yay");
$( '#left' ).animate({
marginLeft: selWidth
}, 500, "linear", function() {
// Animation complete.
$( '#center' ).attr('id', 'temp');
$( '#left' ).attr('id', 'center');
$( '#center' ).attr('id', 'left');
$( '#left' ).css('width', '900px');
$( '#left' ).css('height', '400px');
$( '#left' ).css('overflow', 'hidden');
$( '#left' ).css('position', 'relative');
$( '#left' ).css('left:', '-900px');
$( '#left' ).css('overflow', 'hidden');
$( '#left' ).css('z-index', '2');
$( '#center' ).css('width', '900');
$( '#center' ).css('height', '400');
$( '#center' ).css('position', 'absolute');
$( '#center' ).css('overflow', 'hidden');
$( '#center' ).css('z-index', '1');
});
//reset positions and change images
});

</img> tag is not a valid tag cause images don't have a closing tag.
Also, jQuery is much more fun that you might think!
My suggestion is to not create <img> tags at all, let JavaScript do it for us, we're using an Array of images URL, after all.
Instead of jQuery's .animate(), use CSS transition!
jQuery(function($) {
const gallery = {
one: [ // (P.S: In HTML use data-gallery="one")
'http://placehold.it/900x400/0bf/fff&text=1',
'http://placehold.it/900x400/f0b/fff&text=2',
'http://placehold.it/900x400/bf0/fff&text=3',
'http://placehold.it/900x400/b0f/fff&text=4',
], // you can add more name:[] sets for other galleries
};
$('[data-gallery]').each(function(i, gal) {
const name = $(gal).data('gallery');
if (!Object.prototype.hasOwnProperty.call(gallery, name)) return;
const $slides = $(gallery[name].map(url => $('<img>', {src: url})[0]));
const tot = $slides.length; // Store how many images we have
let c = 0; // Current slide Counter
$('.slides', gal).append($slides); // Append created slides
$(".prev, .next", gal).on('click', function() {
c = ($(this).is('.next') ? ++c : --c) < 0 ? tot - 1 : c % tot;
$slides.css({
transform: `translateX(-${c*100}%)`
})
});
});
});
/*QuickReset*/*{margin:0;box-sizing:border-box}html,body{min-height:100%;font:14px/1.4 sans-serif;}
/* Gallery */
[data-gallery] .slides {
display: flex;
position: relative;
overflow: hidden;
height: 170px;
}
[data-gallery] .slides > img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.4s;
}
<div data-gallery="one" class="gallery">
<div class="slides"></div>
<button class="prev" type="button">PREV</button>
<button class="next" type="button">NEXT</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
P.S: As a side-note, the following
$( '#left' ).css('width', '900px');
$( '#left' ).css('height', '400px');
$( '#left' ).css('overflow', 'hidden');
is a bit verbose. Instead pass an object literal {} like:
$( '#left' ).css({width:900, height:400, overflow:"hidden"});

disable sortable or dragging with jquery ui

I have a div inside a div that I don't want to be able to drag around as it is a navigation element.
example:
$(function() {
$( "#container" ).sortable();
$( "#container" ).disableSelection();
});
<div id="container">
<div class="move">drag me around</div>
<div class="nav">Don't move me</div>
</div>
Basically the .nav I don't want to be able to drag I tried this but it didn't work
$( "#sortable1" ).sortable({
items: "li:not(.ui-state-disabled)"
});

Just filter out the item you don't want to be sortable:
$('#container').sortable({
items: 'div:not(.nav)'
});
Your current filter is acting on li elements, you're using div elements.