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.
Related
http://klaussongs.com/
I have this table on my site that when you hover over the tabs, it changes it. But I want to make it so it works on click I tried defining that on my code by saying:
$("#tabs").tabs();
But it is not overriding the jquery UI CDNed file main event which is mouseover. I can see on console under eventlistener that it has a mouseover listener attached to it, how do I override that to work on click. I also tried this, but it didn't work:
$("#tabs").tabs({
event: "click"
});
I want to drop a small pattern into a div or into the body and have the background for that div or the body, whichever received the pattern, repeat the pattern in x and y. See jsfiddle . If I drag the pattern from the Gallery div and drop it in the body, just the body gets the background pattern. Great! That works. But if I drop the pattern into the canvas div, both the body and the canvas get the pattern. How can I just have the canvas get the pattern when it's the drop target. I tried every way I know, at the end of the drop handler, to stop propagation . . .
e.stopPropagation();
e.stopImmediatePropagation();
return false;
but nothing is working.
Thanks for any help.
You had it almost right. I've modified your fiddle to show the change.
You needed to add the greedy property in the thumb_dropOps object. Modify your function to be the following:
var thumb_dropOps = {
drop : thumb_drop,
accept : '#pattern',
greedy: true
};
Here is a reference link: jQuery UI - Droppable API Docs
Per the jQuery UI Documentation:
By default, when an element is dropped on nested droppables, each droppable will receive the element. However, by setting this option to true, any parent droppables will not receive the element. The drop event will still bubble normally, but the event.target can be checked to see which droppable received the draggable element.
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'd like to move around a list item with the sortable jQuery UI helper. I want to use some sort of handle : being able to move the whole div but only when using that handle. I don't want the div to move when clicking elsewhere than the handle.
Any idea how to do that ? I searched the documentation and didn't find anything. My only current idea would be to set some sort of function that enables the sortable state when I press the handle and disable it when I release the mouse but it feels sloppy.
Use the handle option:
$(document).ready(
function()
{
$('#sortable_list').sortable({axis: 'y', handle: '.handle'});
}
);
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();