$("#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/
Related
I am using JQuery UI's drag and drop for a web application.
I have the following HTML structure:
<div id="list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
and Javscript:
$('#list').sortable({containment: 'parent'});
When I drag, move, and drop an item, all items are aligned nicely verticially, which I like it.
Now I hope that when I drag and hover an item over another item, the item below can show some visual effects similar to the hoverClass available in JQuery UI's Droppable.
How can I do it?
Thanks and regards!
For the hoverClass you can do something simiar with the over and out methods. The start and stop could also help you.
$('.sortable').sortable({
over : function(){
$(this).addClass('valid');
},
out : function(){
$(this).removeClass('valid');
}
});
As stated before, $(this) points to the current sortable you are hovering on a over typed event.
The most reliable way of implementing sortable hovering with jQuery is as follow:
$('#some-element').sortable({
start: {
ui.item.parent().addClass('sortable-hover');
},
over: {
$('.sortable-hover').removeClass('sortable-hover');
$(this).addClass('sortable-hover');
},
stop: {
ui.item.parent().removeClass('sortable-hover');
}
});
You can add more logic as required.
Hope it helps,
-- José
I hope that's what you are looking for
$('#list').sortable({
containment: 'parent',
start: function() {
$(this).addClass('sortable-hover');
},
over: function() {
$('#list').removeClass('sortable-hover');
$(this).addClass('sortable-hover');
},
stop: function) {
$('#list').removeClass('sortable-hover');
},
});
I am using jquery ui 1.9 in an ajax based website.
I have the following code:
This is a <span title="Some warning" class="warning">warning</span> message<br />
This is a <span title="Some info" class="info">info</span> message
Using jquery ui tooltip would work, even for dynamic content:
$(function() {
$( document ).tooltip();
});
But I want different tooltip styles for each of this message-types. For example red color for warning and blue for info and it should work for dynamic content too.
Any ideas?
You need to use the toolTipClass property to specify the css class
$(document).ready(function() {
$( ".warning" ).tooltip({
tooltipClass: "warning-tooltip"
});
$( ".info" ).tooltip({
tooltipClass: "info-tooltip"
});
});
First, here is the code that works:
$(function() {
$('#warning-binder-element').tooltip({
items: '.warning',
tooltipClass: 'warning-tooltip',
content: function () {
return $(this).prev('.warning-toast').html();
},
position: {
my: "right bottom",
at: "right top-10"
}
});
$('#info-binder-element').tooltip({
items: '.info',
tooltipClass: 'info-tooltip',
content: function () {
return $(this).closest('.doo-hicky').next('.info-toast').html();
},
position: {
my: "left bottom",
at: "left+10 top-10"
}
});
});
A few notes on the above:
The selector for .tooltip() is not the item you want to have a tooltip pop up on, it is an element on the page that the tooltip object and its associated events are bound to.
If you attempt to bind two tooltips to the same object, only the last one will persist so binding both to $(document) will not work (which is why I have bound the two different tooltip objects to two different elements on the page).
you can bind the tooltip object to the item that will get the tooltip, but if you use a class selector, this may lead to ill effects.
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.
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");
}
});