I have a jquery ui sortable list. I set up a "trash can" to get rid of items I didn't want on a list. Once I had the 'draggable' set up on my list items, they no longer sort.
trash can
$("#trash").droppable({
drop: function(ev, li)
{
var $element = li.draggable;
$element.remove();
$.ajax({
url: 'deltask.php',
data: 'id='+$element.attr('id'),
dataType: 'html',
success: function(data)
{
}
});
}
});
Making the list sortable
// set our listdiv ul as sortable
$("#listdiv ul").sortable({ opacity: 0.6, cursor: 'move', update: function(){
var order = $(this).sortable("serialize") + '&action=update';
$.post("updatelist.php", order, function(){
});
}
}); // listdiv ul end
and making all list items in that ul draggable so I can drag and trash:
$("#listdiv li").draggable({
opacity : 0.7,
revert : 'invalid',
helper : 'clone',
zIndex : 100,
cursor : 'move'
});
Sorting works as long as I don't include the section just above that makes the <li>'s draggable. Adding that let's me drag and trash em but the list items are no longer sortable.
What's my bad, please?
Thanks,
Steve
NOTE: I don't know the protocol for answering ones own question so I'm just editing my original question! Someone slap me if I'm wrong to do this pls.
Workaround to the problem stated above:
After sleeping on it I thought "Why bother with making my sortable list <li>'s draggable and make my trash can a droppable?"
I just make my trash can a sortable and use connectwith on my list div and trash div and set up a receive event handler and that should work? Let's see...
$("#trash").sortable({
connectWith: '#listdiv',
receive: function(event, ui)
{
var $element = ui.item;
// alert ( $element.attr('id') ) ;
// remove this from original list
$element.remove();
//remove this item from trash list
$("#trash li").remove(),
// remove from database
$.ajax({
url: 'deltask.php',
data: 'id='+$element.attr('id'),
dataType: 'html',
success: function(data)
{
// alert(data);
}
});
} // end receive
}); // end trash
// set our listdiv ul as sortable
$("#listdiv ul").sortable({
opacity: 0.6,
cursor: 'move',
connectWith: '#trash',
update: function()
{
var order = $(this).sortable("serialize") + '&action=update';
$.post("updatelist.php", order, function(){
});
}
}); // end listdiv ul sortable
My original list sorts fine and I can drag a list item to the trash "list" and just remove() it when it arrives from the original list, the trash list, and from my database.
Perhaps not too elegant but hey, it works.
Related
$("#source li").draggable({
appendTo: "#destination",
helper: "clone",
connectToSortable: "#destination",
containment: "document"
});
$("#destination").sortable({
items: "li:not(.placeholder)",
connectWith: "li",
placeholder: "dragging-placeholder",
sort: function() {
$(this).removeClass("ui-state-default");
},
over: function() {
$(".placeholder").hide();
},
out: function() {
if ($(this).children(":not(.placeholder)").length === 0) {
$(".placeholder").show();
}
}
});
JSFiddle: http://jsfiddle.net/j9FK5/7/
When I drag a few boxes from the source UL to the target, they become very hard to sort, especially when trying to move to the beginning. Regular sorting works with the same CSS.
I know it's a common problem, but none of the solutions worked in this particular case.
You can change your tolerance option and set it to pointer.
Specifies which mode to use for testing whether the item being moved
is hovering over another item. Possible values:
"intersect": The item overlaps the other item by at least 50%.
"pointer": The mouse pointer overlaps the other item.
Demo: http://jsfiddle.net/Fs772/
I have an image that I drag from one part of the page and drop into a DIV. No problem. But when I just drag the image around inside its new DIV home, I still trigger the DIV's drop handler. Is there an easy way to disable the drop handler for elements that are already in the droppable?
Thanks
You can add a class to the dropped element, then in the drop function check if the element have that and if so exit the drop function.
In my example I clone the element in a new one on drop, if you use the dragged you must change the selected element.
Code:
$(document).ready(function () {
$(".doodad").draggable({
helper: 'clone',
scroll: true
});
$(".dropped").draggable({
containment: ".box"
});
$(".box").droppable({
accept: ".doodad",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function (e, ui) {
if ($(ui.draggable).hasClass('copied')) return
alert('dropped');
var droppedItem = $(ui.draggable).clone().addClass('copied').css({
position: "relative",
top: $(ui.helper).position().top - $(this).position().top,
left: $(ui.helper).position().left - $(this).position().left
}).draggable({
containment: ".box"
});
$(this).append(droppedItem);
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/hLxAd/
I've positioned 2 containers such a way that container one overlays on another. But when I drop an item onto the container one, the dropped item goes into both containers. How do I restrict that?
//JS Code:
$("div.draggable").draggable({
helper: "clone",
cursor: "move",
containment: 'body'
});
$("div.droppable").droppable({
addClasses: false,
drop: function (event, ui) {
var $draggable = $(ui.draggable),
$droppable = $(this);
$droppable.html($draggable.clone());
}
});
Demo: http://jsfiddle.net/HL8VR/
Thanks #Nal but nothing works for me, So I Created this hack.
I store some data with an element once an item is dropped onto it. Unfortunately the data is stored with both Droppables which I could not isolate.
$("div.droppable").droppable({
addClasses: false,
drop: function (event, ui) {
var $draggable = $(ui.draggable),
$droppable = $(this);
$droppable.data({'drop': true, 'draggable': $draggable});
}
});
But once the item is dropped, I could figure out which droppable I'm hovering on.
$('div.droppable').hover(function() {
if ($(this).data('drop') === true) {
$(this).html($($(this).data('draggable')).clone());
// Clears the data from both droppables to avoid duplicating the item in them
$('div.droppable').data({'drop': false, 'draggable': false});
}
});
Demo: http://jsfiddle.net/codef0rmer/AVQVs/
I have two lists. At start only the first one has visible elements, the second list starts with only one hidden element. When I drag, I search empty list to find if there is only one element and if it's hidden through CSS. If so, I remove the element from the source list and add it to the second one. Also I need second list to be sortable, but at the moment with the code shown below it doesn't work.
$(function(){
$( '.draggable_base_menu_item' ).draggable( {
containment: '#submenu',
stack: '#submenu ul li',
cursor: 'move',
revert: false,
connectToSortable: '.droppable_menu_item_area'
} );
$( '.droppable_menu_item_area' ).sortable( {
tolerance: 'pointer',
items: 'li',
receive: function( event, ui )
{
$(ui.draggable).appendTo( this );
}
} ).disableSelection();
});
Can anyone suggest anything?
Sortables are already draggables. Use sortables with connected lists:
http://jqueryui.com/sortable/#connect-lists
I have shopping cart set up where the user can drag an item from the store shelf and place it in the shopping cart. This all works great. The next step of programming that I cannot resolve is how to remove the item from the cart with a click. There is this in the documentation but there is no example to call it.
$('.drag_box').bind('click', function() {
this.sortable( "destroy" );
});
Does nothing. Help please.
If you just want to remove the element, you can use
$('.drag_box').bind('click', function() {
$(this).remove();
});
Thank you - I have added this but it still moves the original DOM element, what I was ultimately looking to do was to leave the original there and add a different class to it so the user would know it was in the cart. Here is my code.
$(function() {
$("drag_box").sortable({
connectWith: 'li.empty_list',
opacity: 0.6,
handle: 'img',
forcePlaceholderSize: true,
clone:'helper',
revert:true
});
$( "li.empty_list" ).sortable({
stop: function(event, ui) {
$(ui.item).addClass("moved");
}
});