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"
});
Related
I have made a draggable element that doesnt use jqueryui-draggable.
I want to use it alongside jquery ui droppable. Is it possible for jquery-ui droppable to accept any draggable that are not made by jquery-ui? and how?
Please see plnkr
https://plnkr.co/edit/BzNuFtSUGaXmVhpNpqLG?p=preview
$(document).ready(function(){
// $("#drag2").draggable();
$("#drag").drags();
$(".droppable").droppable({
drop:function(event,ui){
$(this).append('dropped')
},
accept: ".draggable1"
})
})
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/
On a web page, I want to display a small div with text in it that is cut off and displayed with ellipses and when there is a mouse-over it should expand to a larger size such that all the text is visible. I then want to be able to use jqueryui drag and drop to move the text box onto a grid. When it is being dragged and placed, I want it to be the small size again.
I have attempted to do this like so:
Mouseover function:
$(function() {
$( ".ui-widget-content" ).mouseover(function(){
$(this).css("width", "200px");
$(this).css("height", "200px");
}).mouseout(function(){
$(this).css("width", "100px");
$(this).css("height", "40px");
})
})
Draggable function:
$(function() {
$( ".ui-widget-content" ).draggable({ snap: "td.chart:not(:first-child)", snapMode: "inner", revert: "invalid", snapTolerance: 40, stack: ".ui-widget-content",
drag: function( event, ui ) {
$(this).css("width", "100px");
$(this).css("height", "40px");
}
});
});
Droppable function:
$(function() {
$( "td.chart:not(:first-child)" ).droppable({
accept: ".ui-widget-content",
drop: function( event, ui ) {
$("#" + ui.draggable.attr("id") ).css("background-color","#D7F970");
}
});
});
Div that is getting dragged and dropped:
Lorem Ipsum
I thought that by using the above, when someone went to drag the div, first the mouse over would be triggered, enlargening the div, then the dragstart would shrink it and it would be fine. However, I am placing it on a table (see selector "td.chart:not(:first-child)" in droppable function), and while it works for the first three rows of the table, the div no longer snaps and gets dropped on the fourth and fifth rows. This problem does not occur if I remove the mouse-over function. Anyone understand what is going on here?
It would maybe help to take a look at your html.
It's just a hunch but maybe it's only a matter of the size of your draggable being too big and being over more than one droppable item.
I would advise trying to change the tolerance of your droppable element to see if it helps :
$( ".selector" ).droppable({ tolerance: "pointer" });
jQuery Documentation states :
Tolerance specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values:
fit: draggable overlaps the droppable entirely
intersect: draggable overlaps the droppable at least 50%
pointer: mouse pointer overlaps the droppable
touch: draggable overlaps the droppable any amount
I'm using jquery ui draggable, I do not want to let the user drag the helper over another element, how can I do this? I can not use snapMode: outer.
Thank you.
You can use the revert draggable option for that purpose.
If you set it to "valid", the drag operation will be reverted if the helper is dropped on a droppable widget. That means you only have to create such a widget around your other element:
$("#yourDraggableElement").draggable({
revert: "valid"
});
$("#yourOtherElement").droppable();
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');
}
});