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>" );
}
});
Related
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'm creating draggable elements on runtime and want to make them stackable. Every time I generate a new draggable element, this code runs:
$('.draggable#Element' + ElementID).draggable({
containment: "body",
stack: "#draggables"
});
Draggable Container with two generated elements:
<div id="draggables">
<div class="draggable" id="Element1"></div>
<div class="draggable" id="Element2"></div>
</div>
I can drag around every element. The containmant also works.
But: Unfortunately, only the last created element stacks if I drag it around. The other elements keep their z-index and stay in background.
I also tried to run this code everytime a new element is created (same result as the code above):
$('.draggable').each(function() {
$(this).draggable({
containment: "body",
stack: "#draggables"
});
});
And this one:
$('.draggable').draggable({
containment: "body",
stack: "#draggables"
});
How do I achieve that every element stacks correctly?
jsFiddle Example: https://jsfiddle.net/zurgs1zb/
check first comment.
and try delete all stack option and declaration stack option run time in after intialization:
$('.draggable').each(function() {
if($(this).draggable( "option", "stack" ) == false) //if not already set
{
$( $(this) ).draggable( "option", "stack", "#draggables" ); // set stack option
}
});
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 a page with two DIVs, both of which are droppable. One of them (#droppable2) is initially hidden and is only shown when I hover the draggable item over the first DIV #droppable (with the dropover event). Example see here: http://codepen.io/anon/pen/AdLJr
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div id="droppable">Drop here 1</div>
<div id="droppable2" style="top: 300px; display: none;">Drop here 2</div>
<div id="draggable">Drag me</div>
<div id="log"></div>
JS:
$( "#draggable" ).draggable();
$( "#droppable,#droppable2" ).droppable({
drop: function() {
$('#log').html($('#log').html() + '<br>DROP');
},
over: function() {
$('#log').html($('#log').html() + '<br>over');
$('#droppable2').show();
}
});
However, when I now hover the draggable item over the second DIV, its dropover event is not fired like it should. Only when drop the draggable item and then pick it up again does it seem to work. The drop event already works on the first try though.
Any ideas what's causing this? I assume this might be a bug?
Ok here is an actual answer. Change your first JS line to this:
$( "#draggable" ).draggable({ refreshPositions: true });
From the jQuery UI draggable docs for the refreshPositions option:
If set to true, all droppable positions are calculated on every mousemove.
Caution: This solves issues on highly dynamic pages,
but dramatically decreases performance.
I also did it in that way with this line $( "#draggable" ).draggable({ refreshPositions: true });, but using a class draggable, but only works for once. I can only drag and drop for once one element. And if there is another element in the place where a droped they all don't work
I think allrecipes.com used to do this when you favorited a recipe, the thumbnail would sort of fly up to your recipe box and then disappear
The slow/fast hide shrinks to a point, but I'd like it to do that same effect by move toward another element on the page instead of "the beginning of the line" default effect
Here is the code I'm using now from the jQuery API docs:
// Hide box on click
$( "#hideBox" ).click(function() {
$( "#box" ).hide( "fast", function() {
});
});
You need to use .animate instead. Have a look at the documentation, here. :)