I am new to jQuery and I am working with the droppable API.
I want to have a group of divs that can all hold one and only one droppable item. I've set the class of my droppable divs to inv. I can drop items into the divs but I can find a way to reject a drop once in the drop function.
I want to be able to detect that my div already has a child and if it does revert the dopped element.
my code currently looks like this
$( "div.inv" ).droppable(
{
drop: function( event, ui )
{
childCount = $(this).children().length;
if (childCount !=0)
{
//revert droppable to initial position
return;
}
//if there is a child revert and return
$( this )
.addClass( "ui-state-highlight" )
.append($(ui.draggable))
}
});
What about disabling the droppable area after receiving an item ?
You can do something like this :
$( "div.inv" ).droppable(
{
drop: function( event, ui ) {
$(this).droppable('disable');
}
});
Related
I am trying to do something similar to this example I found here: http://jsfiddle.net/mekwall/sY7Vr/2/
$(".sortable").sortable({
items: ".drag",
connectWith: ".sortable",
start: function( event, ui ) {
$(ui.item).text("Drop me!");
},
stop: function(event, ui) {
$(ui.item).text("Drag me!");
},
receive: function( event, ui ) {
$(ui.item)
.addClass("ui-state-highlight")
.after(
$("<div>")
.addClass("drag")
.html("New item!")
);
}
});
In my case, I have an action bar that contains 'buttons' and a page. When I drag an action 'button' from the action bar (ie "Add text box") and do the drop, I want to insert a input rather than the button itself.
Is there a good way to do this?
Thanks for your time.
All you need to do is replace the content in the html method. The code below is inserting the html for an input of type text and is then removing the dragged item.
Updated Fiddle
$(".sortable").sortable({
items: ".drag",
connectWith: ".sortable",
start: function( event, ui ) {
$(ui.item).text("Drop me!");
},
stop: function(event, ui) {
$(ui.item).text("Drag me!");
},
receive: function( event, ui ) {
$(ui.item)
.addClass("ui-state-highlight")
.after(
$("<div>")
.html("<input type='text' class='new-input'/>") //Add an input
);
//Remove the dragged item. You can use "hide" here as well
$(ui.item).remove();
}
});
I am using jquery mobile and I need to prevent swipe event over specific element. Need of doing this is because I am using slider and I don't want the swipe event to be invoked resp. I want it to be prevented when user is manipulating with slider. I was not able to too find any solution so I am asking for help here.
This is my javascript code:
$( document ).on( "pageinit", "#demo-page", function() {
$( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
// We check if there is no open panel on the page because otherwise
// a swipe to close the left panel would also open the right panel (and v.v.).
// We do this by checking the data that the framework stores on the page element (panel: open).
if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
if ( e.type === "swipeleft" ) {
$( "#right-panel" ).panel( "open" );
} else if ( e.type === "swiperight" ) {
$( "#left-panel" ).panel( "open" );
}
}
});
});
Thank you.
You need to use both, stopPropagation(); and preventDefault();.
As for the .selector, it can be a tag and #ID or .class, e.g. [data-role=page]#PageID , div.ui-content...etc
$(document).on('swipeleft swiperight', '.selector', function(event) {
event.stopPropagation();
event.preventDefault();
});
Reference: stopPropagation();
Reference: preventDefault();
Working example
I've got multiple drag and drops (jquery-ui). In separated div's. When I drag the draggable and drop it outside the droppable and then drag it again and drop it on the droppable it doesn't give feedback ( like text or alert) only if you drop it in one go. It does keep snapping to the drop area.
$(function() {
$( "#eeneen.drag" ).draggable({ snap: ".drop1", snapMode: "inner"});
$( ".drop1" ).droppable({
accept: "#eeneen.drag",
drop: function( event, ui ) {
$( this )
.addClass("goed")
.find( "p" )
.html( "Correct" );
alert ("correct");
}
});
});
this is repeated for every drag and drop. For some reason it would only give the visual feedback of the last function that's why I made multiple drop classes.
edit:
without the .addClass and .find still same problem.
any ideas?
Final edit. everything Works.
$(function() {
$( "#eendrie.drag" ).draggable({ snap: ".drop3", snapMode: "inner"});
$( ".drop3" ).droppable({
accept: "#eendrie.drag",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.find( "p" )
$("#goed").toggle().hide(2000);
}
});
});
So it has an extra div that shows and hides after a succesfull drop.
Also I defined the height and width of the .drag.ui-draggable. I guess that did it.
I'm using the following to control my accordion:
$(function() {
$( "#accordion" ).accordion({
autoHeight: false, collapsible: true, active: false
});
$('#accordion').bind('accordionchange', function (event, ui) {
$(window).scrollTop(ui.newHeader.offset().top);
});
});
It works well unless I open the same section twice. Then, the accordion freezes and I get the following error:
ui.newHeader.offset() is undefined
The accordionchange event appears to be the jQuery event that corresponds to the accordion's activate event; yes, this is a bit confusing but that's what the source tells me:
// change events
(function( $, prototype ) {
//...
} else if ( type === "activate" ) {
ret = _trigger.call( this, "change", event, {
The activate documentation has this to say:
activate( event, ui )
Triggered after a panel has been activated (after animation completes). [...] If the accordion is collapsing, ui.newHeader and ui.newPanel will be empty jQuery objects.
So your ui.newHeader is an empty jQuery object and empty jQuery objects don't have offset()s. A quick length check on ui.newHeader will probably sort you out:
$('#accordion').bind('accordionchange', function(event, ui) {
if(ui.newHeader.length)
$(window).scrollTop(ui.newHeader.offset().top);
});
Demo: http://jsfiddle.net/ambiguous/e3gUW/
Hey I am using Jquery draggable droppable with table I have initialize both and its working, but the problem is the droppable area is table and the drop item is in div when I try to drop the item it show's below the table, I want the row Id on which it is placed but instead I am getting the whole table
Following are the code
JavaScript code for table
$(function() {
$( "#draggable" ).draggable({ axis: "y" });
$( "#droppable" ).droppable({
drop: function(event, ui) {
console.log($(this).find('tr.pen'))
$(this).append($(ui.draggable));
}
});
});
The table code is very big let me know if you can help I will happy to send you the code
I am open to any suggestion
Thank you .
If you want to drop the draggable on individual rows, then don't instantiate the droppable on the whole table but rather on the <tr>s of the table. Check if this code works for you:
$(function() {
$( "#draggable" ).draggable({ axis: "y" });
$( "#droppable tr" ).droppable({
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
});