I'm writing an app that let's you drag elements from a column on the right, and drop them on a column on the left, and once you drop them the dragged element (a clone of it) is appended to the element where it's dropped. You can also drag and drop a class that floats the element (basically you can float the elements).
The problem is that when you drop two elements on the same container, that is: you make two siblings, and then float one of them, every new element you add to the floated element is also added to the overlapping sibling.
Check this fiddle: https://jsfiddle.net/5265cg7a/11/
$(function() {
function droppingFunc(event, ui) {
if (ui.helper.hasClass("add-elem")) {
event.stopPropagation();
$(event.target)
.append($(ui.draggable.clone().addClass("testing someHeight someMargin clearFix"))
.clone()
.html("")
.droppable({
drop: droppingFunc,
greedy: true,
tolerance: "pointer"
})
);
} else if (ui.helper.hasClass("add-class")) {
var classToAdd = ui.helper.attr("title");
$(this)
.addClass(classToAdd);
}
}
$(".drag-elem").draggable({
helper: "clone"
});
$(".drop-elem").droppable({
drop: droppingFunc,
greedy: true,
tolerance: "pointer"
});
});
Do the follwing and you´ll se the bug:
Add two siblings by dragging two times the "Add an element" button from the right column and dropping it on the left area.
Float one of them by dragging the "Float an element" button and dropping it in one of the previously created elements.
Add a new child element to the floated sibling. You'll see that a new child element is simultaneously added to the overlapping sibling.
Obviously what i want is that the dropped element only gets added to the element where its being dropped and not to any siblings.
I look forward to all your answers and i thank you in advance for all the help!!
Related
So every time I drag and drop an element to a div two problems happen.
1. It doesn't fit to the div. 2. It collapses when I drag and drop one element so I need a way to keep the space the element used to take intact.
https://jsfiddle.net/1yy2u8qw/
$( ".selector" ).droppable({ tolerance: "fit" }); //is this correct?
It looks like you missed <table> and .drop have height:90px - so dragged into element will overflow it. Change to min-height:90px
Here is the solution
https://jsfiddle.net/1nrouva3/2/
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 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 want to change the background of the draggable object after being dropped in the droppable division. how can i pass the current object being dropped?
assume there is #drag div and #drop div. after moving #drag into #drop div. I want to change the color of #drag div to black.
$("#drop").droppable({
drop: function(){
$(this).css('background','black');
},
});
i have no idea how to pass the dragged element into the droppable object after dragging and dropping it into the #drop div. I assumed 'this' would work. but it seems that it points to the #drop div
Try this:
...
drop: function(event, ui) {
// here ui.draggable is the object that was dragged
ui.draggable.css('background','black');
}
...
I'm implementing a solution to drag an element from a container to another. Until here it's ok.
The problem is that after to be dropped in the second container, the element is non anymore draggable inside the same container.
$(".draggableExtra").draggable({
appendTo: "body",
helper: "clone"
});
$(".body").droppable({
accept: '.draggableExtra',
drop: function(event, ui) {
ui.draggable.remove();
ui.helper.clone(true).prependTo(extra.parent());
}
});
The problem is in JQuery 1.5, where there is a bug about the cloned draggable elements.
On JQuery 1.4.4 works fine, but instead to use an older version of jquery I solved using an hidden element in the second container that I will move when I finish to drag the element from the first container.