Draggable JQuery UI - child div disappears - javascript

When I drag my child div inside the parent div, it is disappearing when my mouse drags outside the boundaries. In the draggable Jquery documentation example, the child div cannot go beyond the boundaries of the parent container. Any thoughts on what my code is missing?
HTML markup:
<div class="containment-wrapper">
<div class="boxone" class="draggable ui-widget-content">
</div>
<div class="boxtwo" class="draggable ui-widget-content">
</div>
<div class="boxthree">
</div>
</div>
JavaScript:
$(".boxtwo").draggable({ containment: "#containment-wrapper", scroll: false });
$(".boxthree").draggable({ containment: "#containment-wrapper", scroll: false});
http://jqueryui.com/draggable/#constrain-movement (I'm looking at the "I'm contained within my box" example)
CodePen demo
JSFiddle demo

Change this:
$(".boxtwo").draggable({ containment: "#containment-wrapper", scroll: false });
$(".boxthree").draggable({ containment: "#containment-wrapper", scroll: false});
to this:
$(".boxtwo").draggable({ containment: "#containment-wrapper", scroll: false });
$(".boxthree").draggable({ containment: "parent", scroll: false});

Related

JQuery UI Accordion - Nested Accordions not animated

I have multiple nested JQuery UI accordions - one accordion contains another.
Look at the attached fiddle and the animation (or rather missing animation) after unfolding the nested accordion which is not visible at first. It's hard to explain by words.
How can i achieve a smooth "pushing" animation?
HTML with accordions:
<div id="accordion_broadcasts">
<div id="acc_broadcasts_header">
<div class="accordion_descriptions">
<div class="acc_descriptions_header">
<table class="broadcast_table">
<tr class="broadcast_tr">
<td class="broadcast_td1">foobar</td>
<td class="broadcast_td2">CLICK (working)</td>
</tr>
</table>
</div>
<div>
only visible if unfolded
</div>
</div>
</div>
<div>
<div class="accordion_descriptions">
<div class="acc_descriptions_header">
<table class="broadcast_table">
<tr class="broadcast_tr">
<td class="broadcast_td1">foobar</td>
<td class="broadcast_td2">CLICK (poorly animated)</td>
</tr>
</table>
</div>
<div>
only visible if unfolded
</div>
</div>
</div>
</div>
Javascript:
//Outer accordion
$( "#accordion_broadcasts" ).accordion({
collapsible: true,
active: false,
disabled: true,
header: "#acc_broadcasts_header",
activate: function(event, ui) {
$( ".accordion_descriptions" ).accordion("refresh");
$( "#accordion_broadcasts" ).accordion("refresh");
}
});
//Inner accordion
$( ".accordion_descriptions" ).accordion({
collapsible: true,
active: false,
header: ".acc_descriptions_header",
disabled: true,
activate: function(event, ui) {
$( ".accordion_descriptions" ).accordion("refresh");
$( "#accordion_broadcasts" ).accordion("refresh");
}
});
//fold outer accordion
$("#unfold_broadcast").click(function(){
if ($("#accordion_broadcasts").accordion( "option", "active") === false){
$( "#accordion_broadcasts" ).accordion({active: 0});
}
else{
$( "#accordion_broadcasts" ).accordion({active: false});
}
$( "#unfold_broadcast" ).remove();
});
//fold inner accordion
$(".broadcast_td2").click(function(){
if ($(this).closest(".accordion_descriptions").accordion( "option", "active") === false){
$(this).closest(".accordion_descriptions").accordion({active: 0});
}
else{
$(this).closest(".accordion_descriptions").accordion({active: false});
}
});
JSFiddle
Note 1: The jsfiddle example is a simplified version of my actual code. The problem remains the same.
Note 2: There are probably some unnecessary refresh calls on these accordions. I've played around with the refresh method until the accordions worked somewhat.
The magic is to add heightStyle: "content" to the properties of the outer accordion.
So its Javascript looks like that:
$( "#accordion_broadcasts" ).accordion({
collapsible: true,
active: false,
disabled: true,
header: "#acc_broadcasts_header",
heightStyle: "content",
activate: function(event, ui) {
$( ".accordion_descriptions" ).accordion("refresh");
$( "#accordion_broadcasts" ).accordion("refresh");
}
});
See my updated JSFiddle.
I had the same problem, and fixed it this way.
During my research, i found out, that the content height of the outer accordion was zero while it was unfolded. So setting a height to the content div would be a solution, if you now the exact size of the nested content, but heightStyle: "content" does this for you.

jQueryUI dragged item fires drop for each element that's behind the first droppable

For demonstration I've created this fiddle: http://jsfiddle.net/Lxmr1n4p/4/
In a web game I have several layers that are positioned absolute and layered one above another. In those layers there are droppable elements.
In the fiddle I made a black div as a draggable element. If I drop it on the big midgrey drop target, it alerts correctly, that it dropped on layer 2.
But if I drop it on the dark grey area, it says that dropped on layer 2 and when I click okay it also alerts that it dropped on layer 1, which I don't want, since (beside that it lays behind item in layer 2), the item in layer 1 has nothing to do with this action, a complete layer is above it.
This is the layout:
<div class="layer1">
<div class="r">
<div class="item"></div>
</div>
</div>
<div class="layer2">
<div class="r">
<div class="item"></div>
</div>
</div>
<div class="drag"></div>
div.r just makes a relative box.
And this is my javascript:
$(document).ready(function () {
$('.layer1 .item').droppable({
drop: function () {
greedy: true,
alert('dropped on item in layer 1');
}
});
$('.layer2 .item').droppable({
drop: function () {
greedy: true,
alert('dropped on item in layer 2');
}
});
$('.drag').draggable({});
});
Is there a way to tell jqueryui that I only want the uppermost item to trigger the drop event?
This example is not real game code, since it's way to big.
Hi you could disable the other dropable element(s) on hover:
over: function(event, ui){
$( ".layer1 .item" ).droppable( "disable" )
},
out: function(event, ui){
$( ".layer1 .item" ).droppable( "enable" )
}
http://jsfiddle.net/Lxmr1n4p/5/

Jquery Drag and Drop: Drop on the background image

I want drag the panel menu items But here items is drag.
How to drop on the above background image....
$(".drag-images").draggable({
revert: 'invalid',
containment: "#panel-03, #drop",
stop: function() { $(this).draggable('option','revert','invalid');}
});
$("#panel-03 img" ).draggable({ stack: "#panel-03 img" });
$("#drop").droppable({
greddy: true,
tolerance: 'touch',
drop: function(event,ui){
ui.draggable.draggable('option','revert','true');
}
});
Fiddle
You are missing some script.
Please add this script to your html and try
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
Also from your css
#panel-03{
// remove all overflows hidden
}
remove the overflows and the issue with the image not showing will be fixed as well.
Hope this helps..

jquery ui sortable - Dragging not working correctly when using containment

I'm having an issue with jquery ui sortable where I can't drag certain items (i guess based because of the height of the item elements)
<div class="container">
<fieldset>
<legend>handle 1 THIS CAN'T BE DRAGGED BELOW HANDLE 2</legend>
<div>blah<br /></div>
</fieldset>
<fieldset>
<legend>handle 2 BUT I CAN DRAG THIS ABOVE HANDLE 1</legend>
<div style="display: none">blah<br /></div>
</fieldset>
$(".container").sortable({
axis: 'y',
handle: '> legend',
containment: 'parent',
/*cursorAt: {top: 1},
start: function(event, ui) {
ui.placeholder.height(ui.item.height());
$(this).sortable('refreshPositions');
},*/
});​
see http://jsfiddle.net/ADyhR/10/
EDIT: It seems to work in jquery ui 1.8.9. is it just a bug in 1.8.18?
the commented out javascript lines are things that i've tried but haven't worked, but i figured I might just be slightly off in how i was using them.
You may use the tolerance option and set its value to tolerance: "pointer",. I have updated your DEMO and created a NEW DEMO.
Here is the JS code that works with tolerance option added:
$(".container").sortable({
axis: 'y',
tolerance: "pointer",
handle: '> legend',
containment: 'parent',
/*cursorAt: {top: 1},
start: function(event, ui) {
ui.placeholder.height(ui.item.height());
$(this).sortable('refreshPositions');
},*/
});

jQuery - drag element inside DIV / or sortable element

I'm having a problem with dragging a div inside an other div element.
HTML looks like this:
<div id="grid">
<div id="el1" style="width:300px"></div>
<div id="el2" style="width:100px"></div>
<div id="el3" style="width:100px"></div>
<div id="el4" style="width:100px"></div>
</div>
All elements are draggable and have the css style float:left;position:relative;.
When I drag el1 to the place of el3 it will work, but of course it will overlap the element el3.
The draggin jquery draggable is working fine but I want to insert div with id el1at the HTML code in this position.
That it will look like this:
<div id...>
<div id="el2...
<div id="el3...
<div id="el1...
<div id="el4...
</div>
My problem now is, that this is a grid. el1 has the width of '300' all other the width of '100'. Dragin el1 to the place of el3 should swap el2, el3 and el4 to the place of el1 and el1 to the place of el2, el3, el4.
To get this behaviour I think I'm needed to move the div HTML code after el4. But how to determine which element is the nearest?
------- UPDATED-------
I way trying to use sortable... see here http://jsfiddle.net/vwK5e/2/
But if you put the red box over number 3, the red box will be in the second line (correct) but number 4 should be next to number 3 cause of the empty space.
TIA
frgtv10
Refer to http://jqueryui.com/demos/sortable/#display-grid
I guess you want functionality like this.
Answer
A different kind of jquery sortable
My solution looks like this:
Instead of jQuerys draggable I'm now using sortable (link to sortable).
In addition to this I'm now getting the help of the jQuery plugin called masonry(link to masonry)
Example:
// Masonry
$('#container').masonry({
itemSelector: '.element',
isResizable: true,
columnWidth: 100
})
// Sortable
$('#container').sortable({
items: '.element',
forcePlaceholderSize: true,
placeholder: 'card-sortable-placeholder element',
tolerance: 'pointer',
handle: '.handle',
cursor: 'move',
cancel: '.notdrag',
start: function(event, ui) {
ui.item.addClass('dragging').removeClass('element');
ui.item.parent().masonry('reload')
},
change: function(event, ui) {
ui.item.parent().masonry('reload');
},
stop: function(event, ui) {
ui.item.removeClass('dragging').addClass('element');
ui.item.parent().masonry('reload');
}
});

Categories