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.
Related
I have an LI with A tag in it.
<li title="LI TEXT" id="test">
ELEMENT WITH HREF HREF
</li>
I want to create jquery tooltip for the LI and default tooltip for its child elements. But this does it both for the jquery elements for LI and its childs.
$("#test").tooltip();
http://jsfiddle.net/k45emuhg/
Okay, what you've described is quite easy with the items option. Simply include a selector restriction for the items you want to show their tooltips, e.g. the same as the original selector that you're calling .tooltip() on:
$("#test").tooltip({items: "#test"});
The question doesn't make this explicit, but you probably also want to show only one (rather than 2) tooltips when you hover over the children element. To do that, you can disable and reenable the parent's tooltip on the mouseenter and mouseleave events. JQuery provides a nice shortcut for that with the hover function:
$("#test a").hover(function() {
$(this).parent().tooltip("disable");
}, function() {
$(this).parent().tooltip("enable");
});
Note that you can use any relevant selector, not necessarily $(this).parent(), depends on how your HTML is structured
Here's the example fiddle updated: http://jsfiddle.net/957r8x51/
I currently have implemented jQuery UI sortable on my list of items
<ul>
<li>1</li>
<li>2</li>
...
</ul>
To that list I have slider which shows only X number of items and rest can be shown by clicking next or previous buttons.
I tried to add sort parameter to sortable constructor and call those methods, but here is the thing. The container showNext and showPrevious methods do some jQuery animation and destroy first node etc. and I think that workaround would be easier and leave those methods for buttons.
How would you suggest to make this happen: When I start to reorder elements and moving to the end of the list, the list shows next element and places currently dragged after that, but doesn't stop dragging event.
I figured this by making container overflow:hidden and implemented sort(e,ui)
sort : function(e, ui) {
//move by modulus
}
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');
}
});
I am working on drag and drop tool using jQuery UI's sortable widget.
I'd like to add a message into an empty div where something can be dragged into, like: "drag here". I'd like to remove this message as soon as something is in that div. There will be times when the page loads with something already in that div, so it can't be only on action, but onload needs to check it too.
How do I go about it?
Here's my code:
$("#divFrom, #divTo").sortable({
connectWith: '.connectedSortable'
}).disableSelection();
You should be able to set up a draggable, and droppable and tap into droppable's drop event handler, which is fired when an item is dropped:
$("#target").droppable({
drop: function() {
// Empty the droppable div:
$(".message").remove();
}
});
Demo here: http://jsfiddle.net/andrewwhitaker/rUgJF/2/
As for doing something similar on load, if you provided your markup it would make providing a solution a little easier (is there a specific element inside the droppable div that you could check for?)
Hope that helps.