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/
Related
I have two div containers
top_div
bottom_div
initially top_div will be blank. I'm using jQuery UI drag and drop. I'm able to drag contents from bottom_div to top_div.
My requirement is in above top_div I need to sort (using sortable jQuery UI) the contents.
And after sorting when I refresh the page it should not change its position.
Please any help is appreciated Thanks!
Html Code
<div id="top_div">
</div>
<br/>
<div id="bottom_div">
<ul>
<li class="ui-state-default">Sachin Tendulkar</li>
<li class="ui-state-default">Ab de Villiers</li>
<li class="ui-state-default">MS Dhoni</li>
<li class="ui-state-default">Ricky Ponting</li>
<li class="ui-state-default">Rahul</li>
</ul>
</div>
Jquery Code
<script type="text/javascript">
$(function ()
{
$("#bottom_div li").draggable({
tolerance:'fit',
revert: "invalid",
refreshPositions: true,
drag: function (event, ui)
{
ui.helper.addClass("draggable");
},
stop: function (event, ui)
{
ui.helper.removeClass("draggable");
}
});
$("#top_div").droppable(
{
drop: function (event, ui)
{
if ($("#top_div li").length == 0)
{
$("#top_div").html("");
}
ui.draggable.addClass("dropped");
$("#top_div").append(ui.draggable).sortable();
}
});
});
</script>
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/
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..
How come when I drag my draggable div to droppable1 div it always gets placed in droppable2 div.
In addition I followed the jQuery UI snap-back option but it does not work. How could I make it that instead of dragging the actual draggable element it drags an instance/copy of it and have droppable accept multiple of these draggable elements.
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( '#draggable' ).draggable();
$( '#droppable1' ).droppable({
drop: function(event, ui)
{
$(this)
.append(ui.draggable.css({position: 'relative', left: '0px', top: '0px'}));
}
});
$( '#droppable2' ).droppable({
drop: function(event, ui)
{
$(this)
.append(ui.draggable.css({position: 'relative', left: '0px', top: '0px'}));
}
});
});
</script>
<div class="well">
<div id="draggable">CONTENT</div>
</div>
<div id="droppable1" class="well col-md-3" style="z-index:-1;"></div>
<div id="droppable2" class="well col-md-9" style="z-index:-1;"></div>
You can use the accept filter to accept specific items in specifc droppable area.
$( '#droppable1' ).droppable({
accept: '#draggable',
drop: function(event, ui)
{
$(this)
.append(ui.draggable.css({position: 'relative', left: '0px', top: '0px'}));
}
});
You can use a clone helper for the draggable option, than in the drop event clone and append the dropped helper.
Code:
$(function () {
$('#draggable').draggable({
helper: 'clone'
});
$('#droppable1, #droppable2').droppable({
drop: function (event, ui) {
$(this)
.append(ui.helper.clone(false).css({
position: 'relative',
left: '0px',
top: '0px'
}));
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/v3L7A/
Maybe I don't understand how clone works with sortable, but here is what I would like to do.
When sorting an item I would like a clone of the item I am dragging remain until I stop drop the item in its new position.
Here's the code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<style type="text/css">
.sort { width: 150px; }
.ui-state-highlight { background-color: #000; height:2px; }
</style>
</head>
<body>
<div>
<ul class="sort">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$('.sort').sortable({
helper: 'clone',
placeholder: 'ui-state-highlight',
opacity: '.5'
})
})
</script>
</body>
</html>
Thanks in advance for the help!
When you use the clone option, the original item is hidden with style="display: none" when you start dragging. You could attach a handler to the sort event (or whatever event hides the original item) to re-show it. Everything should work for you then.
P.S. I used Firebug to look at what was happening to the original element. If you're not using it you really ought to be!
Its just one way to hack it. You can lead from here on. Change your config as below.
$('.sort').sortable({
helper: 'clone',
placeholder: 'ui-state-highlight',
opacity: '.5',
start: function(event, ui) {
$('.sort').find('li:hidden').show();
}
})
I have two lists, sortable1 and sortable2.
I want to clone items from sortable1 to sortable2 and vice versa.
One improvement have to be to check if it is top element, if it is. prev() will not work.
So check if there is a prev, if not use after().
My solution was this:
$("#sortable1").sortable({
helper:"clone",
connectWith: "#sortable2",
start:function(event,ui){
$(ui.item).show();
clone = $(ui.item).clone();
before = $(ui.item).prev();
},
stop:function(event, ui){
before.after(clone);
}
}).disableSelection();
$("#sortable2").sortable({
helper:"clone",
connectWith: "#sortable1",
start: function(event, ui){
$(ui.item).show();
clone = $(ui.item).clone();
before = $(ui.item).prev();
},
stop:function(event, ui){
before.after(clone);
}
}).disableSelection();
While it might not fix the issue you're having. There is an extra comma at the end of your parameters.
opacity: '.5',
Few words about improvements that John Bledsoe said.
For cloning first elements in #sortable1 I use such a code:
stop:function(event, ui){
if (before.length) before.after(clone);
else $(this).prepend(clone);
},