drag and drop a box from one div to another - javascript

I am having a small box (div) inside a another div A. I want to drag it from div A to div B. the problem is my div A is overflow:scroll and because of that the box goes behind div A and scrollbar appears. There is no overflow property on div B.
I have initialized box to be draggable and div B to be droppable using jquery ui libraries.
Screenshot : http://i53.tinypic.com/9ieko7.png
I want to get rid of box hiding beneath divA and instead should be droppable on divB.
Thanks a lot !!

Related

Detect element inside div in react

Im thinking about way to detect a element index when this element is inside of some other element.
So red box is my div, black box is centered absolute in center of this div. 1,2,3 are the list element. How to detect on scroll when list element is inside of black div?

Animate div but keep height dynamic

I have the following scenario on JSFiddle: http://jsfiddle.net/psax3fge/
D FIDDLE: http://jsfiddle.net/psax3fge/1/
Basically its a div that has some info in it. The info is 3 separate divs that are inline block, they will be next to each other if there is enough room but will stack underneath each other when the Windows is made smaller
I want this div to be hidden until a button is clicked where the div slides down. I know not setting the height property will make the div have a fluid height (height gets bigger as things stack underneath each other). However, when I animate it with jQuery, I have to set a height.
Is there a way to do this without losing the fluidity of the div? An alternative is to not animate the div and just make it visible/hidden on button click, but I'd really like to use the animation
Update 4: http://jsfiddle.net/psax3fge/4/
Leave the .container div height to auto and remove the overflow from it.
Now you can use the slideToggle function of the jQuery to show and hide the .container.
P.S you can set display:none to container in initialization.

align the dropped divs in a container div

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/

Size of div is not expanded automatically jquery

I have div with draggable, resizable and editable (contenteditable=true) functionality. This div
contain some text in it, which user can edit. My problem is that when user write the text in the div, the div size
is not expand automatically. I set its height:auto but this also not works. What should i do so that while
entering the text the size of div also increases?
If you're talking about jQueryUI's resizable plugin, then that's your problem. It sets an explicit height on the element, overriding your height: auto.

how to resize the text area by another div

I have a text area and a div i want that when i click and move the div up or down the text area also re-size, i.e. the div below the textarea should act as the vertical resize handle for the textarea.
using Jquery UI you can make the bottom div draggable and use this to resize the textarea, I made a little jsfiddle for you which demonstrates this :)
http://jsfiddle.net/GspjK/

Categories

Resources