jquery droppable accept

Question

Hi All, Can anyone tell me how can i write a function in accept condition and then how does it finds out that what to accept and what not to accept. Fo r eg i want to accept div a and div b in accept condition.How can i write i through a function.

Answer 1

According to the Jquery documentation on Selectors.

All draggables that match the selector will be accepted. If a function is specified, the function will be called for each draggable on the page (passed as the first argument to the function), to provide a custom filter. The function should return true if the draggable should be accepted.

Thus,

$('.selector').droppable({ accept: '.special' });

in their example will only act as if something has been dropped on it if it has the class 'special'. It looks like it can accept any Jquery selector.

Answer 2

If I understand your question correctly, you want to conditionally accept the dropped element based on custom code. Aberon's answer is the typical case: you want to allow only certain draggable options to be dropped based on their class, and all others will revert. If that answers your question, then fine.

However, there is a case for having the revert animation happen conditionally based on something more complex than a class match. In my own project, I am using drag-drop to add users to a group. If the dropped user is already in the group, I want the user helper element to revert back. Otherwise, I go ahead with an AJAX action to insert them. This is no substitute for back-end checking, but it's nice visual feedback.

I have looked elsewhere for a simple answer to this. Note to JQuery maintainers: to me, the most straightforward way would be to add some property to the event object in the drop function, like this:

$('.target').droppable({
 accept: '.valid'
 drop: function(event, ui) {
  if(isDropOK() == true) {
   // add child here
  } else {
   event.revert = true;
  }
 }
});

Sadly that doesn't work. Here's what does "work", though: set the draggable element to always revert, and then hide the helper if the condition is met. You can get a reference to the helper by looking for the only element on the page that has the class ".ui-draggable-dragging". Here's an example, replace "isDropOK()" with your own logic:

$('.valid').draggable({
 revert: true,
 helper: 'clone',
 opacity: 0.5
});

$('.target').droppable({
 accept: '.valid'
 drop: function(event, ui) {
  if(isDropOK() == true) {
   $('.ui-draggable-dragging').hide();
   // add child here
  }
 }
});

So to recap, every element will always revert unless you step in on the drop event and manually hide the helper. The revert animation will still happen, but your users won't see it. It's a little hack, but the end result seems to work all right.

Answer 3

instead of using a class as accept, you can just use a function like and return true if it matches your criteria

$('#mydroppable').droppable( { accept: function() { return true; }, drop: function () { alert("Dropped!"); } });

Answer 4

If you want the droppable to accept a selection of elements you can do something like this:

$(".droppable").droppable({
    accept: function(d) { 
        if(d.hasClass("foo")||(d.attr("id")=="bar")){ 
            return true;
        }
    }
});

This droppable will accept elements with the class "foo" or an element with the id "bar"