Making elements droppable by using its CSS class Name when multiple CSS classes are applied to a single element

Question

Hello

I've the following element

<div class="class1 class2 class3"></div>

I'm trying to get all the elements with class name 'class3' using jquery

$('.class3').droppable();

But i'm not getting the above div as droppable. Any ideas?

Answer 1

Edit for updated question:

.droppable() doesn't take a function, it takes an object or nothing, you just need this for the defaults:

$('.class3').droppable();

Also make sure it's in a document.ready handler, like this:

$(function() {
  $('.class3').droppable();
});

Then, also make sure jQuery UI is included correctly in your page...you should be getting an error if this isn't the case (.droppable() isn't a function, etc).

Answer 2

Try this

    $('.class3').droppable({ accept: 'someselector' });

Answer 3

That should work for sure, here are some other potential causes of your error:

Executed before DOM is ready Make sure your code is executed after the DOM has been loaded

$(document).ready( function() {
    //Your Code
});

$ object conflicting Several objects make use of the variable $ as shorthand for their functions, try using jQuery. instead.

jQuery(document).ready( function() {
    jQuery('.class3').each(function(){
    });
});

Edit for updated question I'm not well versed with the droppable plugin, but the jQuery website has an example which looks like this:

$("#droppable").droppable({
  drop: function() { alert('dropped'); }
});

More Info: http://docs.jquery.com/UI/Droppable