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();
Related
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'm using JQuery UI Sortable to allow reordering elements within a list when dragging element. I would like to improve this processing by allowing reordering only when dragging from an icon present in each element (this icon is a span within the li) not for the whole element.
Is it possible to do this with Sortable?
Thanks very much for your help!
Thierry
Yes, jQuery-UI provides a "handle" option:
http://jqueryui.com/demos/sortable/#option-handle
Restricts sort start click to the specified element...
Initialize a sortable with the handle option specified.
$( ".selector" ).sortable({ handle: 'h2' });
I am using jQuery UI 1.8.16 and am having trouble dragging a draggable item through a sortable list and then dropping it on a droppable item.
Here is an example of my problem
http://jsfiddle.net/9RURx/1/
The draggable item needs to be able to attach to the sortable list or be dropped on the droppable item.
Any suggestions?
Passing through sortable seems to make the list element lose its selector... not sure why, but the "accept" property doesn't work anymore
Quickest solution is to change accept to accept: ".ui-draggable"' see it working here: http://jsfiddle.net/9RURx/3/
now maybe you don't want to use the built in class. You can add a class to the LIs you want to be dropable and refer to them that way. Like so: http://jsfiddle.net/9RURx/4/
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.
I've found a article that explains how to connect draggable elements to sortable ones:
http://the-stickman.com/files/jquery/draggable-sortable.html
But what I need is to connect draggable elements to arbitary DOM elements,
I need to do something when I drop it on some element.
But how know the element that the draggable is on when I drop it?
Create a droppable, and use $(this) inside the ondrop function you set to refer to the droppable, and then do the connection.
http://jqueryui.com/demos/droppable/#event-drop
I believe that should do it, unless I misunderstand your problem.