When dragging a div using jquery UI and dropping it into a UI droppable div, I want to trigger a jquery animation on the div being dropped into the area. When the animation is triggered, it is called on all divs with class = "drag-element" but I want only the specific dragged and dropped element to be animated. I have tried including removeClass(".drag-element") and addClass(".animate-element") and telling animate() to act on that but it is still applying the animation to all .drag-element divs. How do I do fix this?
JQuery:
$(function() {
$( ".drag-element" ).draggable({ containment: ".container" }).removeClass(".drag-vid");
$( ".drop-field" ).droppable({
drop: function( event, ui ) {
$(".drag-element").animate({"left": "+=50px"}, "slow");
$( this )
.css("background-color", "silver");
}
});
});
http://jsfiddle.net/NBHMT/
Use:
ui.draggable.animate({"left": "+=50px"}, "slow");
Instead of:
$(".drag-element").animate({"left": "+=50px"}, "slow");
http://jsfiddle.net/kAG6q/
What happened with your code is when you call $(".drag-element").animate(.... It selects all the drag-element divs. Instead drop function has a ui argument which provides you information about the dragged element using ui.draggable
Related
I'm trying to show/hide sections using triggers based on classes. So it's easy to throw the trigger class on any element and it will slideToggle the next show/hide element class in the DOM.
The first part works fine. Now I'm adding a trigger to expand/collapse ALL elements. Trouble is, I can't figure out how to sync their states.
For example: I click on 3 of 8 elements so they slide open and become visible, the other 5 are still closed... Now when I click my expand/collapse all trigger, using slideToggle just switches their states so I end up with 3 closed and 5 open.
How do I get their states to sync regardless of what their current state is?
I've been trying to figure out the conditionals to check if the trigger has the opened or close class on it, then toggle the next element, but I've only made a mess so far.
Here's my code:
jQuery( document ).ready( function( $ ) {
// The element to hide/reveal
$( '.bodhi-hide-reveal' ).hide();
// The trigger to hide/reveal
$( '.bodhi-reveal-trigger' ).click( function( e ) {
e.preventDefault();
// Target only the next element to hide/reveal and toggle it
$( this ).next( '.bodhi-hide-reveal' ).slideToggle();
// Toggle the trigger class
$( '.bodhi-reveal-trigger' ).toggleClass( 'opened closed' );
});
// Expand/collapse all button
$( '.expand-collapse-all' ).click( function( e ) {
e.preventDefault();
// Find all hide/reveal elements and toggle them all together
$( 'body' ).find( '.bodhi-hide-reveal' ).slideToggle();
});
});
Just a class named "opened" is enough to detect if the next div is open or close. So I write an IF/ELSE block to decide whether to slideUp or SlideDown. Also you have to decide what would you do when some of divs are expanded? Do you want to collapse all or expand all? I prefer to collapse all first. So I search to find an opened one (using array length) and if I find it, I collapse all divs, elsewhere I expand all:
Also there are some inefficient selectors like $( 'body' ).find(). I also replace those selectors with efficient ones:
jQuery( document ).ready( function( $ ) {
// The element to hide/reveal
$('.bodhi-hide-reveal').hide();
$('.bodhi-reveal-trigger').removeClass("opened");
// The trigger to hide/reveal
$('.bodhi-reveal-trigger').click( function( e ) {
e.preventDefault();
// Target only the next element to hide/reveal and toggle it
$(this).next('.bodhi-hide-reveal').slideToggle();
// Toggle the trigger class
$(this).toggleClass('opened');
});
// Expand/collapse all button
$('.expand-collapse-all').click( function( e ) {
e.preventDefault();
//Check if there is at least one open div:
if ($('.bodhi-reveal-trigger.opened').length){
$('.bodhi-reveal-trigger').removeClass("opened")
$('.bodhi-hide-reveal').stop().slideUp();
}
else {
$('.bodhi-reveal-trigger').addClass("opened")
$('.bodhi-hide-reveal').stop().slideDown();
}
});
});
I am trying to use the draggable jquery UI, however it doesn't work on my website. In the example that is given they have two ids, one called draggable and one called sortable. However in my website I only have one div called attraction. I have included the library and there are no errors, however it still isnt working.
This is a screen shot of the div structure within my webpage. Each div called attraction is the thing I want to be able to drag, and change order of each of these divs. Does anyone know how I can incorporate the jquery ui into this? This is my code below in the JS
$( function() {
$( "#attraction" ).sortable({
revert: true
});
$( "#attraction" ).draggable({
connectToSortable: "#attraction",
helper: "clone",
revert: "invalid"
});
$( "div" ).disableSelection();
} );
In the HTML I am adding the div attraction into this div below, but I am doing that by javascript.
<div id="itinerary_attractions" >
</div>
Would appreciate any help
I want that the tooltip should hide automatically after few seconds.Even if the mouse is over the element, still the tooltip must hide after sometime.
I am using the jquery tooltip pluggin.
Add setTimeout to open event:
$( '#field' ).tooltip(
open: function( event, ui ) {
setTimeout(function(){
$( '#field' ).tooltip( "close" );
}, 3000);
})
;
fiddle
I am new with learning jQuery UI and I am having a bit of trouble.
I am trying to create a droppable element, that can be dropped in divs with a certain class.
I have this working (so it the element will drop in that class), but I would want to "update" the old class, when the element is dropped into a new class.
http://jsfiddle.net/nxkLf1y9/1/
My fiddle shows the example (so it can be dropped in any element with the class "droppable" (to show this, the class will turn green.) When i drop the element into the next class, I want the color of the old class to revert back to normal, and for the new class to be green (where the element currently is sitting.)
so drop the box in the first div, the div will turn green, it won't drop in the 2nd div because it doesn't have the class "droppable", drop it in the 3rd div, and it will turn green, but the first box is still green too.
My js.
jQuery(function() {
jQuery( "#draggable" ).draggable({revert: "invalid"});
jQuery( ".droppable" ).droppable({
drop: function( event, ui ) {
jQuery( this )
.css({backgroundColor:'green'});
jQuery('#draggable').appendTo('#droppable')
}
});
});
Thanks for the help!
What you can do is use a class instead of inline styles:
Fiddle Example
jQuery(function() {
jQuery("#draggable").draggable({
revert: "invalid"
});
jQuery(".droppable").droppable({
drop: function(event, ui) {
//Remove Class of previous active
jQuery('.active').removeClass('active');
//Make this active
jQuery(this)
.addClass('active');
jQuery('#draggable').appendTo('#droppable')
}
});
});
CSS
.droppable.active {
background: green;
}
I have this problem:
When a menu element (using the sortable plugin) is being dragged and hovers another element, a function is supposed to start. I see that while the sortable plugin is initialized it ignores the hover functions written elsewhere in the code.
How can i make it fire the hover function while I'm dragging an element and I hover over the intended element?
Thanks a lot!
You will need to use the sortable over event:
Supply a callback function to handle the over event as an init option.
$( ".selector" ).sortable({
over: function(event, ui) { ... }
});
Bind to the over event by type: sortover.
$( ".selector" ).bind( "sortover", function(event, ui) {
...
});
$("#sortable").sortable({
over: function(event, ui) {
alert( 'The Sortable Over Event Just Fired!!' );
}
});