Description
I have a container div that has little divs with pictures on them..
what works perfect is when I click any one of them(div) it comes out and do stuff that is assigned to it.
Now I can drag any div I want back into the container but the problem is the div when dropped in the container stays at the place where it is left. I want to align all the divs in the container at the top when ever droped.
e.g when I drag any div back into the container it should be aligned with all other divs in the container.
What have I tried ?
I have tried to give the dropped div
position: inherit with jquery . but that only works if there is 1 div to drag and drop.
Have I searched StackOverflow form answers ??
Yes I have and I found a solution
found solution demo
but it involves the clonning of the divs which in my case is not required.
Can any one help me ??
Would it solve your problem if you add a "remove" line in your solution? E.g. :
$("#droppable").droppable({
drop:function(e,ui){
if($(ui.draggable).parent().attr("id")!=$(this).attr("id")){
var clone = $(ui.draggable).clone();
clone.removeAttr("style");
clone.appendTo($(this));
$(ui.draggable).remove(); // Remove original element
}
},
revert:true
});
Fiddle demo: http://jsfiddle.net/lparcerisa/xu2dm7gj/1/
Related
I'm looking for the some hacky way to add elements to slider vertically.
Here is the live demo on JSFiddle
I would like that next sibling after second will take a place below the first element and so on (tiling). Can't figure out what should I add/change.
[Edit] : Solution is given in TCHdvlp's comment to his reply below. Thanks a lot !
I need to drag elements from one container (container1) to another (container2) and back, like in this fiddle :
http://jsfiddle.net/U2nKh/20/
(this was not created by me : see original question)
As you can see in the exemple above, when the element is attached to its new container, its 'style' attribute is erased, and it snaps to the top left corner of the new container.
$(ui.draggable).appendTo($(this)).removeAttr('style');
I'd like the draggable to stay in place in its new container, where it's dropped.
But if I delete .removeAttr('style'),
$(ui.draggable).appendTo($(this));
the position information is kept, but is inexact since the parent of the draggable has changed. As a result, my draggable is positionned much lower when dropped from container1 into container2, and much higher in the other case.
I am able to compute the new position where my element should "land", based on the relative positions of the containers. But I don't know how to define this position.
Should I let the .removeAttr('style') and recrete it fom scratch with new values ? But how?
Should I delete that part, but modify the position values? But how ?
I hop I am clear enough for you to give me some advice.
Thanks !
Carefully read all the fiddle!
The draggable div has top:10px; and left:10px; properties. When it's dragged, those properties change. When it's dropped in the other droppable area, the removeAttr('style'); will remove inline style and set back the 10*10px offset. BUT, it's not snapped.
Also, the draggable element is position:absolute but the droppable area is position:relative. It means that the child element is positioned relatively to its parent.
That's why, with the original fiddle, the 10*10px position looks to be always the same, whatever the droppable area.
Remove in the css position:relative for both container and position:absolute for the div.
Remove the removeAttr and the append in the dropped function.
Because we don't want the element to be attached to the area, we don't use append. We will use 2 variables to compare last and current droppable area.
http://jsfiddle.net/TCHdevlp/U2nKh/576/
I'm trying to attach click events to a couple of divs. One of which has no height or width, just borders. Maybe it's just the browser, but the clicks are being triggered very unreliably. Even the css parameters .class:hover{} isn't really working.
$("body").on("click", "._tlh_dropdown, ._tlh_dropdown *", function (event) {
isn't working when the a div contained by ._tlh_dropdown is clicked. And the div ._tlh_dropdown_close_button is not removing it's parent div when clicked, nor turning a darker shade of gray when it is hovered over. What am I doing wrong here? I assume it has to do with the click event not being applied to the areas of the divs that are "just padding". Is this the case? How can I overcome this?
http://jsfiddle.net/UrNUM/7/
This is happening because the underline element that is a div element overlaps the elements in question . As you know div is a block level element.
One work around is to to set the 2 divs to inline-block
._tlh_dropdown_input_container, ._tlh_dropdown{
display: inline-block;
}
Check Fiddle for hover
If you want the div to be block level as it is then you can also play around with the z-index
._tlh_dropdown_close_button{
z-index: 1;
}
This will make sure the close div is always on top of the underlying container
UPDATE
2 events fire for every click event on the page..
So the content is not shown when u click on the image because of this condition
if ($targ.hasClass('_tlh_dropdown')
|| $targ.closest('._tlh_dropdown_content').length)
return;
This happens because the e.target when you click on the arrow image will be the arrow and not the tlh_dropdown .. So it fails on this condition and moves to the next statement where the content is removed.
Change it
if ($targ.hasClass('_tlh_dropdown')
|| $targ.closest('._tlh_dropdown').length
|| $targ.closest('._tlh_dropdown_content').length)
return;
It should work..
Check Fiddle
Also I feel the same can be accomplished with a lot less code. You can always have the HTML already built and then hide or show based on the condition.
Regarding the close button, if you hover "_tlh_dropdown_input_container" in the inspector, you can see that it overlaps the bottom part of the X button. That's why the hover/click event on the X is not caught below the middle of it.
Regarding the down arrow, just wrap it with another DIV on which you'll add the events. You can achieve minimal HTML by using a single DIV and adding the arrow to it using CSS :before or :after.
Please see the following jsfiddle: http://jsfiddle.net/bhellman1/Na3hd/11/
Right now when you move over the box, the hoverbox appears in the same place for all items.
What I would like to do is position the hover box based on which #box.corner you are moused over. If the #box.corner is to the left of the box, I'd like the hover box in the left, outside the box, centered to the corner.... If you mouse over a #box.corner that's in the bottom right, I'd like the hover box to show at the bottom right, centered to the corner.
Any ideas on how to accomplish this?
Thanks
If I read your question correctly, this should be what youre looking for: http://jsfiddle.net/Na3hd/17/
As you can see i moved around some of the css to match what different elements have in common more, so that the code can easily be reused and assigned to other elements. I moved the defining of the hoverbox into the mouseenter function, so that a new div gets created on each mouseenter, which will then not result in complication when setting the positions.
Hope this helps!
EDIT
Here a more dynamic approach: http://jsfiddle.net/Na3hd/22/
Also, i just realized you wanted to have these items show up outside of the boxes.
I have a menu system made up of divs and i want to animate the left property to slide each time the user mouses over a menu item but i need the outer div(which is black) element to expand as the menu items move left to right also I want the div element(.container) to slide back and contract the outer div element(this black div which is 0 width) I have a basic example done in jsFiddle it olny moves the elements to the left
Having a little trouble fully understanding, but is this sort of what you mean?
http://jsfiddle.net/V3RHr/2/
If I could rewrite your html a bit, I would put make each .menu-item into an unordered list.
When you mouseenter the unordered list, you expand the second container. Inside that mouseenter function, I would have a second event when you mouseenter a list item, you populate the second container and stopPropogation.
You could probably still do it with a mouseenter on the first container, and another mouseenter on the div.menu-item, but your first container has extra height and width.
You should be able to fix the left is null issue by having the code not execute on the last .content, like this:
$('.container').not(':last').find('.menu-item').mouseenter(function () {
This will not apply to the menu-items within the green box.
For the re-show issue, I would change the way you are showing. Instead of sliding the box out from behind the other, you can position it where you want it to end up and hide it, then you can use:
.animate({width: 'show'})
Which will give a similar sliding effect.
That, or do it similar to my response to your other question, only without the collapsing I had previously:
http://jsfiddle.net/V3RHr/3/