I'm trying to figure out how to write a statement which will stop the jQuery droppable function if the the dragged element is the parent.
Basically what I have is a table, and each cell has the id of x-axis:eq+'-'+y-axis:eq. (x over-x-down).
When the user drags an element to a different cell, I update the info, so if you drag from cell 3-3 to 3-4, I update the data.
However, if the user starts dragging from 3-3, and then stops dragging still within the 3-3 cell, I want to prevent the droppable function from firing.
I've been looking at using the 'accept' function, but can't figure out how to say !jQuery('td#3-3')
Here's what I've got
jQuery('div','table').draggable({axis:'y', containment: 'table'});
var cellId=jQuery(this).parents('td').attr('id');
jQuery('td','table').droppable({
accept : !jQuery('td#'+cellId),
drop: function(){
jQuery.ajax({ update stuff in db});
}
});
try
$('.myselector').droppable({ accept: 'td:not(#' + cellId +')' });
Related
I have 3 separate (with separate class names) items I am dropping into a big div. I need the drop function to run something different depending on which draggble item I drop into the droppable.
Here is my code.
$(".gridster").droppable({
accept: ".dragExist,.dragDefault, .dragLaunch",
hoverClass: "drop-state",
drop: function(event,ui){
var currentId = $(ui.draggable).attr("class");
if(currentId == "dragExist"){
gridster.add_widget.apply(gridster, ['<li>new Widget', 1, 1]);
console.log(event);
event.preventDefault();
}
}
});
If i could get the first if statement to work I would add in the other 2 classes, but I don't seem to be getting this correct. Thank you!!
A simple solution is to add a class suppose 'selected-item' on mousedown event of each draggable element. Then in the drop event you can easily identify the element which was dragged using the 'selected-item' class and at the end remove the class.
$('#ac').autocomplete({
source: '/url',
appendTo: $('#ac').closest('.popupWindow'),
select: function (event, ui) {
// do stuff
}
});
in IE9 first time everything works fine, but when i type text is second time, elements don`t reacts on clicks
error appears only when using appendTo option
solve it: on one of parent elements was click event handler with e.stopPropagation()
So, I am using jQuery Mobile and I'd like to animate individual elements on a page change both before and after the change. I set transitions to "none" in jQuery moblie then try to add class to css3 animate individual elements. It works on pagechange, so when you go to a new page the transition on the elements appears, but pagebeforechange happens to quickly and the animation is lost. Is there a way to make the pagebeforechange function wait until the animation is done then go on to the next page? preventDefault(); stops the page from changing at all. I need like a call back or deferred obj or something? If I call changepage in pagebeforechange after the animation is done...the function runs recursively :(
transitions: function(){
$(document).bind( "pagebeforechange", function( e, data ) {
$('.search_words li').addClass('animated flipInX');
});
$(document).bind( "pagechange", function( e, data ) {
$('.search_words li').addClass('animated flipInX');
});
},
Thanks in advance!
you could try pageshow instead of pagebeforechange. Beaucse pageshow is fired before the pagechange event
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.