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.
Related
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 am working on a tool based on jQuery UI draggable functionality.
I have a number of boxes in the left column of the table. When they are dragged in yellow area, I would expect the remaining divs to move upwards to fill the space left by the box that was moved.
But it's not happening. Why?
It is pretty difficult to test but from my knowledge on the question here is a possible cause/solution to this.
The droppable plugin does not remove the dragged element from its original markup position, it is visually moved to the droppable element (with some option allowing to accept to drop certain elements or not, events, etc).
The elements have a position: relative css rule, which represents the "normal flow" for elements (in the order they appear in the markup). So even if the element is visually placed elsewhere on the page with css, its place in the markup is still the same and it is still taking the space it normally should.
This fiddle illustrate what i'm trying to explain :-)
By looking at the source code form the "working website", they actually remove the dragged element from the original draggable list and re-create it in the droppable list !
When they define the .droppable() they do this:
h.droppable({
tolerance: "intersect",
accept: ".card",
greedy: true,
drop: function (a, b) {
card = b.draggable;
putCardIntoStack(card, c)
}
});
On the drop event, they call putCardIntoStack(card, c) passing the currently dragged element as the card parameter. Within this method, they remove the original "card" (a.remove()) and re-create it in the dropzone (newcard = createCard();):
function putCardIntoStack(a, b) {
progressVal = $('#progBarRd').width();
card_idDOM = a.attr('id');
card_idDB = card_idDOM.substr(IDPREFIX_CARD.length, card_idDOM.length - IDPREFIX_CARD.length);
stack_idDB = b.substr(IDPREFIX_STACK.length, b.length - IDPREFIX_STACK.length);
$.ajax({
url: URL_DRAGDROPAJAX,
type: 'POST',
data: 'action=movecard&cardid=' + card_idDB + '&tostack=' + stack_idDB + '&prog=' + progressVal
});
// 'a' is the card
// they extract the id/content from the dragged card
cardId = a.attr('id');
cardLabel = a.text();
// they remove the card from the DOM
a.remove();
// they create a new card with the extracted info
newcard = createCard(cardId, cardLabel);
newcard.addClass('stackcard');
// and append it to the dropzone
$('#' + b).removeClass("empty").find('.stackDrop').append(newcard);
globalcheck()
}
jQuery UI does a similar thing on the droppable demo page. On the drop event, they call a function deleteImage() which removes the dragged image from the original markup and appends it to the drop zone.
I hope I'm clear enough :-)
I also hope I'm right, it is pretty difficult to test quickly but it makes sense :-)
I'm using jQueryUI Accordion, and genereate the elements on the fly. I need to prevent accordion expanding if we click Remove action link inside the header.
To stop further handlers from executing after one bound using .live(), the handler must return false. Calling .stopPropagation() will not accomplish this.
No luck with return false. Please see the demo.
I don't think you will have too much luck achieving what you want with live(), as jQuery only supports event bubbling and not event capturing. The design decision was probably due to the fact the IE does not support event capturing, even though W3C's speicification has the flexibility for both.
Your best bet is to attach a click event to the remove button right after it is inserted into the DOM (to stop the event propagation) before you re-initiate the accordion. You may need to take care not to bind click event to the existing remove buttons multiple times.
The pseudocode would look something like this:
call .accordion('destory') on the current accordion
create the new element, i.e. <h2>...<a class="revmoe">...</a></h2><div>...</div>
insert the new element to the existing accordion
bind a click event to the remove button in the new element to stop event propagation
initiate the accordion, i.e. .accordion({..})
SO posts on event capturing in jQuery:
event capturing with jQuery
Event Capturing vs Event Bubbling
Just use the given functions by the plugin:
$('#accordion').accordion({active:8, disabled:true});
jQuery('.remove').click(function(){
$('#accordion').accordion('disable');
})
I chose the option "active:8" because this way no header is opened from the beginning (index -1 does not work for IE). Check the function and options out at: http://docs.jquery.com/UI/Accordion
Hope this is what you were looking for :-)
I'm using jQuery and I have the following problem:
In my site I have a chessboard with pieces. Every square is a simple div with the background property to show white or black. Over these squares (inside the divs) I've put an img tag referencing the piece that must be over that square. Something like:
<div id="a8" class="square" style="background-image: url('/images/background_white.png')">
<img id="piece_a8" class="piece" src="/images/rook_black.png" />
</div>
I can control the movement of the pieces using jQuery. Every piece-class img is a draggable and every square-class div is a droppable. I already have a server-side function that, given a set of coordinates, returns "VALID" if the movement is valid, and "INVALID" if otherwise. My idea is, if the server returns "INVALID", the piece must return to its origin square, and if the server returns "VALID", the piece must stay in its new square, deleting every other piece inside the target square.
My problem is, I don't know how can I enforce this return value in my jQuery code. I've tried putting functions in the revert property of the draggable, and in the accept and drop functions of the droppable, but I haven't found how to make $.get return false or true.
Any help would be really appreciated.
Thanks in advance,
Léster
Nevermind, answered.
In case someone needs to know, the trick is in 2 parts:
First: In the draggable definition, under the start event, add a function that saves the original position. Like this:
$('item_to_drag').draggable({
start: function(){
$(this).data("origPosition",$(this).position());
}
});
Second: In the droppable definition, under the drop event, do your .get and use a function to process the answer; in case your conditions are not met, animate the draggable back to its original position. Like this:
drop: function (event, ui) {
$.get(url,function(data) {
if (data == '"INVALIDO"')
{
ui.draggable.animate(ui.draggable.data("origPosition"),"slow");
}
else
{
//store new positions, whatever;
}
}
);
}
That'll do the trick.
Part of the answer came from here: In jQuery, how to revert a draggable on ajax call failure? .
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.