I have an unordered list that needs to be sortable, so
$('#myID ul').sortable({ placeholder: 'ui-state-highlight' });
works. Now, the problem is that the user also wants to be able to drag the elements...
I don't think I can have it sortable, AND do
$('#myID li').draggable({
revert: 'invalid',
})
Can I?
Related
Question is that the clone helper on jQuery Sortable is not showing itself with the following settings:-
$('#sortable').sortable({
items: "li",
helper: "clone",
appendTo: "body",
placeholder: "ui-state-highlight"
});
Essentially, the placeholder is being shown, but the actual helper cloned element is not.
appendTo and helper are necessary because without the helper and appendTo, when I seek to drag the LI element, the li element will sometimes disappear and be deleted when dropped.
I can confirm there is no overflow css on the parent <ul> and that the disappearing <li> also happens when appendTo is set to parent. Containment did not prevent the <li> from disappearing.
I am using jQuery UI 1.10.2. Anyone konw how to address this?
EDIT: To be clear, I've identified that the item is disappearing into a child sortable, because there are intersecting divs in the list structure containing child sortable elements.
Is it possible to reject an LI element with a certain class from a sortable? Whats happening is that the LI is dropping into the child sortable even though it has no connectWith The LI needs to only be sortable inside its parent sortable and not try to insert itself in a child sortable (they even have separate ids and separate classes so not sure why this is happening).
Partial Solution:
stop: function(event, ui){
if(ui.item.parent().attr('id') !== 'sortable'){
$("#sortable").sortable("cancel");
}
},
If anyone has a better solution, please do let me know.
I have a sortable and droppable list, and also a separate set of draggables:
ul.sortable
li.droppable
li.droppable
li.droppable
/ul
ul
li.draggable
li.draggable
li.draggable
/ul
I apply a hover class on the droppables:
$(".droppable").droppable({ hoverClass: "hover" });
The hover is supposed to be a visual cue for the user, telling him that a draggable can be dropped onto a droppable.
The problem is that the hover class is also applied when a droppable is hovered by a sortable element as well. The visual cue is, in this case, totally wrong.
Here's a fiddle illustrating the issue (drag the draggables over the sortables, reorder the sortables): http://jsfiddle.net/TWXeH/
How do I make the hover class work only when there's a draggable over a droppable, but not with sortables?
You're looking for the accept option
$(".droppable").droppable({
hoverClass: "hover",
accept: ".draggable"
});
I've read everything similar to my problem posted here but not found any solution.
I have created a menu with sub menu entries inside dropdowns. All menu entries are sortable to all menu levels. root menu entries to child lists and the other way.
Nearly everything works fine but sorting to the first dropdown results a bug. It is neighter not possible to sort a menu entry before the first dropdown nor to sort inside the first dropdown. By trying to sort inside the first dropdown the placeholder code spawn inside the neighbor (last) dropdown and on stop sorting the entry also is inside the last dropdown and not inside the first like it should. Sorting to the other dropdowns does not have this behavior. Maybe anybody has an idea about it?
Here is the js-fiddle:
http://jsfiddle.net/dehil/Vy4pu/1/
$('ul').sortable({ //
connectWith: $('ul'),
items: 'li',
placeholder: 'pf_sortable-placeholder',
tolerance: 'pointer',
cursor: 'pointer',
cursorAt: {
top: -20
},
zIndex: 20000,
placeholder: 'pf_sortable-placeholder',
})
Nested lists are always a bit awkward with jQuery UI. Recently I found http://johnny.github.com/jquery-sortable/ which may be used to sort bootstrap navs.
See http://johnny.github.com/jquery-sortable/#bootstrap.
I'm using jQuery to create a droppable element - this appears to work fine, as the element gets the class ui-droppable.
I've set it up like this:
$('#trashcan').droppable({
drop: function( event, ui ) {
alert('Dropped');
}
});
where #trashcan is an image.
Later, in response to a user action, I set up some draggables. These are table rows, and I set them up like this ('element' is just the created table row):
$(element).draggable({
revert: false,
helper: 'clone',
intersect: 'pointer',
stop: function() {
alert('dropped');
}});
Afterwards, they look like this:
<tr class="ui-draggable">
<td>First</td>
<td>Name</td>
</tr>
So it all looks like it's set up ok. However, when I drag a table row over the trashcan, I get the 'dropped' from the draggable code, but not from the droppable. So the draggable has been dragged, but the droppable hasn't recognised it.
I'm not sure what to check for here. Is there any reason why it wouldn't work on table rows, for instance? I've checked things like z-index, and that doesn't appear to be the issue. Do I have to do something special to connect the draggable and droppable after the draggables are created (i.e. something that gets done when the droppable is created, which I need to re-do because the draggables are created later)?
I have an ul of draggable items (#doc-editor-options ul li), an area for dropping those items (#doc-editor-content) and an ul within that area for holding those items (#items-holder), which is sortable. This dragging and dropping is only one-way, only items from the list can be dragged and dropped into the holder.
$("#doc-editor-options ul li").draggable({
helper: 'clone',
connectToSortable: '#item-holder',
containment: $(".doc-editor")
});
$("#doc-editor-content").droppable({
drop: function(e, ui){
console.log('dropped');
}
});
$("#item-holder").sortable({
placeholder: 'placeholder-highlight',
cursor: 'pointer',
});
Two questions that I have:
Right now when I drag an item from the list and drop it into the other list, the drop callback for .droppable() is called twice. I think this has something to do with the #item-holder being sortable. I want it to only be fired when I drop an item into the list and only know about that item's event and ui in the callback.
I also need the functionality where by default, the items-holder is not sortable. The only time it becomes sortable is when you are dragging and hovering an item over it. So I can't sort the list by default, but if I drag an item over to it, I can choose where to place that item in the list (i.e. the list is now sortable) and once I drop it, the list becomes unsortable again.
EDIT: I figured out #2, I needed to bind mousedown to the draggable items which enables sorting then disables it on mouseup. Still having problems with #1, it seems like some of the sortable events are firing the drop callback when I drop an item in or I hover out of the item holder.
1:
Your drop() gets called twice because connectToSortable is also triggering a drop().
My suggestion would be to delete $("#doc-editor-content").droppable() altogether, and instead add the receive(e, ui) handler to your sortable.
2:
Your fix works. However I would suggest a much easier alternative: leave the sortable always enabled and add the option "handle: h2". (Pick any tag that will not exist within your LIs.) This will let you drop into the list, but disable user sorting in-place.
Example:
$('#item-holder').sortable({
placeholder: 'placeholder-highlight',
cursor: 'pointer',
handle: 'h2',
receive: function(e, ui) {
console.log('dropped');
}
});