We Keep Coding

dragging li from one ul to another ul

I'm trying to move a <li> from one <ul> to another <ul> using jquery-ui draggable and droppable.
Currently I have
HTML
<div>
<h4><span>basket</span></h4>
<ul id="basket" class="basket">
<!-- items -->
<li id="test1">test1</li>
<li id="test2">test2</li>
</ul>
</div>
<div>
<h4><span>courses</span></h4>
<ul id="courses" class="courses">
<!-- items -->
</ul>
</div>
JS
$("#test1").draggable({
revert: "invalid",
containment: "document",
cursor: "move"
});
$("#test2").draggable({
revert: "invalid",
containment: "document",
cursor: "move"
});
$("#basket").droppable({
accept: "li",
activeClass: "ui-state-highlight",
drop: function(event, ui) {
basketCourse(ui.draggable);
}
});
$("#courses").droppable({
accept: "li",
activeClass: "ui-state-highlight",
drop: function(event, ui) {
courseCourse(ui.draggable);
}
});
function basketCourse(item){
console.log("added course to basket");
}
function courseCourse(item){
console.log("added course to courses");
}
How do I move test1 and test2 from the basket and to the courses?
Right now I can drag #test1 and #test2 around inside the basket, and it will run basketCourse(), but it never seems to be able to allow me to drop either of them inside courses.
I am using bootstrap, jquery and jquery-ui..

Your list doesn't have enough height to drop there items, just set min-height: 100px or whatever you want, and you'll be able to drop items there - https://jsfiddle.net/825pqyz8/

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/

Draggable JQuery UI - child div disappears

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});

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');
}
});