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;
}
Related
I have an issue regarding jquery Ui droppable.
I need to drop an element before or after the element it's dragged over. Is there anyway to detect which element it's over, and then append/prepend it in the parent container.
Right now, I just drops in the end of the div, because of append, I'm a little clueless.
I made a fiddle to hopefully better illustrate my issue:
http://jsfiddle.net/tsxzf80u/
$('section').droppable({
accept:'.dragme',
drop:function(event, ui){
var div = $("<div />").addClass('full').html('test');
$(this).append(div);
}
});
Thanks in advance
If you make each of the divs inside of the section individually droppable, then use after(), seems to do what you want.
$('#fullId1, #fullId2').droppable({
accept: '.dragme',
drop: function (event, ui) {
var div = $("<div />").addClass('full').html('test');
$(this).after(div);
}
});
http://jsfiddle.net/tsxzf80u/2/
Is it possible to change the element being dragged on the 'start' method? For instance, if I have a button titled 'yellow square' that can be dragged. It just says yellow square, but when you drag it you're actually dragging a yellow square, and not the button with the draggable property.
I suppose I'm asking if it's possible to alter an element that is currently being dragged?
Thanks!
Yes it is. Have a look at the api-docu: http://jqueryui.com/draggable/#visual-feedback
example "customer helper" should be what you're looking for.
This is the relevant code:
$( "#draggable" ).draggable({
cursor: "move",
helper: function( event ) {
return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
}
});
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
I have two set of draggable and two sets of dropable elements.
What I want is the first set of draggable elements to be droppable only inside the first set of droppables.
The second set of draggables should be droppable only to inside the second set of droppables.
A code snippet:
// this can be dropped only inside .drop elements
$('.drag').draggable({ revert: true });
$('.drop').droppable({
drop: function() {
//
}
});
// this can be dropped only inside .drop2 elements
$('.drag2').draggable({ revert: true });
$('.drop2').droppable({
drop: function() {
//
}
});
So a user won't be able to drop element with .drag class to .drop2 container.
This is what you want.
Use Accept property of droppable widget and revert property of draggable widget to achieve this.
I am actually trying to make a .php page where I am going to have 3 draggable elements which have to be dragged to 3 droppable elements -each draggable to a droppable, and they are unique, so one each droppable will only accept a certain draggable.
The thing is that I need to control that all of the elements have been dragged to the right spot, in which case I should redirect the user for example to success.php, otherwise, if some of the elements were dragged to the wrong droppable, the user have to go to for example failure.php.
Is there anyway for example to save a certain value in a $_SESSION in PHP in order to know that all the draggables have been dropped in the right place?
This is the code for the drag&drop:
$(function() {
$("#draggableLeiden").draggable();
$("#draggableTheHague").draggable();
$("#draggableRotterdam").draggable();
$("#droppableLeiden").droppable({
accept: '.imgLeiden',
drop: function(event, ui)
{
$(this).addClass('ui-state-highlight');
}
});
$("#droppableTheHague").droppable({
accept: '.imgTheHague',
drop: function(event, ui)
{
$(this).addClass('ui-state-highlight');
}
});
$("#droppableRotterdam").droppable({
accept: '.imgRotterdam',
drop: function()
{
$(this).addClass('ui-state-highlight');
//var activeClass = $(this).droppable('option', 'activeClass','ui-state-highlight');
}
});
});
I am trying to do this for example getting the active class of the droppable elements to see if it matches 'ui-state-highlight', but actually, that tag is gonna be executed everytime the page reloads, so if I try to insert any code into the
drop: function()
it will always execute.
Thanks a lot in advance!
Use the revert option instead. When a draggable element is dropped on anything but the accepted droppable element then it will slide back to its original spot. Does this work for you?
Are you by chance looking for ui.draggable it holds the element that was dropped?
http://jqueryui.com/demos/droppable/
$('#target').droppable({
drop : function(event,ui){
if($(ui.draggable).attr('id') == "correcttarget")
{
window.location = "yay.php";
}
else
{
window.location = "awwww.php";
}
}
})