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)?
Related
I'm trying to manually close a tooltip. The tooltip is created on a table using the items option to select some td's. When the td is clicked, it should close the tooltip. This doesn't seem to work.
<table id="thingtable">
<tr><td class="thing one">One</td></tr>
<tr><td class="thing">Two</td></tr>
</table>
$("#thingtable").tooltip({
items: ".thing",
content: "Thing"
});
$(".one").click(function (e) {
$("#thingtable").tooltip("close");
});
If I instead add the tooltips directly to the td's, then it works.
$(".thing").each(function (index) {
$(this).tooltip({
items: ".thing",
content: "Thing"
});
});
$(".one").click(function (e) {
var td = $(e.target);
td.tooltip("close");
});
Here is a fiddle. Clicking on One in the fiddle doesn't close the tooltip, but clicking on Three does.
Having to add a tooltip to each td seems wrong, especially when the table approach works other than this manual close issue. Is that the route I must take?
In the click event, you need to use the close and the disable methods. The caveat is if you want them to be enabled for use later. Here is a way to do that.
Working example: https://jsfiddle.net/Twisty/hn4tqzrL/2/
JavaScript
$(".one").click(function() {
console.log("Thing One clicked.");
$("#thingtable").tooltip("close").tooltip("disable");
}).hover(function() {
$("#thingtable").tooltip("enable");
}, function() {
$("#thingtable").tooltip("enable");
});
Making use of .hover() we can detect when the mouse has moved in and out and trigger the enable method. Technically, we do not need to take any action with the handlerIn function.
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 list of elements that are sortable and sort fine. I also have a droppable that resides outside of the sortable list. When I drop items on the droppable, it is intended to perform a copy operation, meaning that sorting during this operation is not desirable.
Unfortunately however, dragging a sortable to an external droppable causes sortable.update to fire. Is there a way to have all sortable drag/drop events ignored if a sortable is dragged outside of a given element?
I've gone through all the relevant sortable events, and I can't seem to find any reference to the element the sortable was dropped on, in order to see if they have common parents.
Here's a fiddle to demonstrate: http://jsfiddle.net/6yhbG/
Dragging either sortable 1/2 to the droppable causes the sortable.sort to fire.
OK finally got to the bottom of it: sortable('cancel') needs to be called from sortable.stop and I'm simply adding a class to the sortable so it knows whether to cancel itself or not:
$('div').droppable({
drop: function(e, ui) {
ui.draggable.parent().addClass('dropped');
}
});
$('ul').sortable({
stop: function(){
if ($(this).hasClass('dropped')){
$(this).sortable('cancel');
$(this).removeClass('dropped');
}
}
});
With my updated example at: http://jsfiddle.net/6yhbG/1/
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.