When using jQuery Ui draggable tolerance touch, I am facing problem like when the element touches two droppable elements of same class it is dropped in both the droppables. I have added a image below to describe the problem.
This can be done by using tolerance pointer. But expected behavior is when draggable hovers any point of the droppable it should be activated to drop.
How can I drop only on any one of the element either this or that?
Heres the working fiddle:
http://jsfiddle.net/tE94H/
To make it short:
drop: function (event, ui) {
$(this).droppable('destroy');
}
does the trick. Keep in mind, the dropped Elements is the one, where the mousecursor is closer to.
Related
What is the best way to check if element is above another one?
I have container with a lot of children with absolute position, and each of the children is draggable with jQuery-ui draggable..
I need to check in the drag stop if the dragged element is dropped above another one.
I know I could take the element center and iterate all the other elements and check if it is in their area, but I'm looking for more elegant way to check this.
Check this fiddle please: http://jsfiddle.net/g36gLss9/1/
$(function() {
$( ".draggable" ).draggable({
stop: function( event, ui ) {
$( ".draggable" ).each(function(obj){
$(this).html( 'z-index: ' + $(this).css("z-index"));
});
},
drag: function( ) {
$(this).html( 'z-index while dragging: ' + $(this).css("z-index"));
}
});
});
As the example demonstrates, the draggable feature from jquery ui leaves the z-index value of the dragged elements untouched.
therefore you can assume that an element appearing after another draggable item would be positioned above said item.
That might not be true though, in case you set z-index manually before. Bu the example also states how to retrieve the z-index of a draggable item. So to be on the safe side you could compae values for z-index first. and in case of equality compare the order of appearance in the code.
Also you can hande the z-index of draggable items with the zIndex option documented here: http://api.jqueryui.com/draggable/#option-zIndex
I have an element, let's say a div, that I want to be able to drag and drop into another div. If the element isn't dragged into the other div I would like it to animate back to it's initial position. The draggable divs are relatively positioned. So, my question is what's the best approach? Is there a method in jQuery UI which will allow it to animate back? Or am I going to have to write it? If I do, here's my strategy:
get coordinates of the draggable div on start of drag using $('#draggableElement').css('left'), and $('#draggableElement').css('top')
On drag complete use the jQuery .animate to put it back in place.
Is that strategy correct? Or is there something more efficient I could be doing?
Have a look at this
and maybe the helper of a jquery ui draggable options -> helper.
I think this should help you. If not, please specify your question.
You need to set revert: 'invalid'
example:
$( "#draggablediv" ).draggable({helper : "clone", revert: "invalid" });
the helper:clone makes a clone when you try to drag it, when you dont drop it in the area the revert: "invalid" returns the clone to his start position.
If you want the dragable to return to his position use revert: "true"
Please see http://api.jqueryui.com/draggable/#option-revert
I have a small problem which i can't seem to solve myself.
Look at this fiddle:JSfiddle
This is a basic example of the problem I have.
I have a large div which is a droppable area. Inside this droppable area are multiple other droppable areas.
The inner droppable area should walk trough its code when the element is dropped. Instead the code from the outer div seems to run.
Am i doing something wrong? The area around the divs should stay this way because elements can be placed here (not officially dropped).
I hope my question is clear enough, but I think the fiddler speaks for itself.
P.S. - resizing in this example isn't functioning but is functioning in my development environment.
Rusty and Mark,
Thank you for your replies.
I'm sorry for the confusing resizer. I just removed that from the code.
New Fiddler
Just to clarify things. The box div is a container which has multiple images in it. I am trying to achieve the following:
http://postimage.org/image/qwhtik04f/
The grey dotted boxes are the dropbox2 div from my example.
The space around those drop boxes are dropbox div.
The space with the board is the only place where images may be dropped without anything happening.
The dragged images can snap back to the dropbox2 divs.
If the images are dragged onto the dropbox div, the images should revert.
Setting the greedy: true option on the inner droppable will prevent the event from happening on the outer droppable:
jQuery('#dropbox2').droppable({
greedy: true,
drop: function(event, ui) {
// ...
}
});
Your code has this for the outer <div>:
$("#dropbox").droppable({
drop: function(event, ui) {
ui.draggable.draggable( 'option', 'revert', true );
}
});
This says to set the revert option to true when you drag into the outer <div>. However, when you drop in the smaller <div>, the option is still set to true. All you need to do is change the revert value on your draggable element after a successful drop in your inner <div>:
$("#dropbox2").droppable({
drop: function(event, ui) {
ui.draggable.position( { of: $(this), my: 'center', at: 'center' } );
// Add this line
ui.draggable.draggable( 'option', 'revert', false );
}
});
Update:
Mark pointed out that my solution doesn't stop the propagation of the event to the parent container. As his answer shows, you need to add greedy: true in your initial options. The jQuery documentation says:
If true, will prevent event propagation on nested droppables.
That sounds like what you're looking for. You still need to change the revert property on your draggable, since greedy is only set on your droppables and won't affect your draggable reactions.
I have been pulling my hair out trying to make this work.
I have two connected sortables, defined like so:
var sortlists = $("#List1, #List2").sortable(
{
appendTo: 'body',
tolerance: 'pointer',
connectWith: '#List1, #List2',
revert: 'invalid',
forceHelperSize: true,
helper: 'clone',
scroll: true
});
Here is a link to an example of jsfiddle
Because of the page setup, both sortables are being contained in div's with overflow: auto they are also wrapped in parent containers with overflow set to hidden. For arguments sake, lets say there is no way around that.
Is there a way to make the container element scroll when the helper is being positioned towards the lower or upper edge of the container?
Any help would be appreciated!
With helper:'original', I get the scrolling behaviour you seek, (in Opera 11.61).
forked fiddle
Edit: Here's a version of the fiddle with "ganged-scrolling"
I think this is what you want. Drag from div (with scrollable) to div (with scrollable) without the dragged item appearing behind the div.
http://jsfiddle.net/nURN5/1/
.document.body.appendChild //required to add code with link...
The next best approach would be to actually drag a clone of the item...
The forked fiddle with "ganged-scrolling" unfortunately exhibits the very nasty side effect of constraining (visually) the selected item to it's own div.
I'm using the drag and drop plugin with jQuery UI. I'd like to make it so that the draggable container can only be dragged and dropped on the container. In the demonstration:
http://jqueryui.com/demos/droppable/#revert
It has 2 options. One is to revert when it drags to the container, the second is to revert when it isn't dragged to the container.
Is there a way to combine these two? I don't want to be able to drag the #draggable container anywhere where there isn't a #droppable container.
As stated above, I found the solution by adding :
$('#draggable2').remove();
$('#draggable').draggable({ revert: true });