I have a fairly straightforward jQuery draggable/droppable, but I can't get both activeClass and hoverClass to fire.

$(document).ready(function() {
  $("div.drop_zone").droppable({
    accept: ".draggable_thing",
    activeClass: "armed",
    hoverClass: "active",
    tolerance: "pointer",
    drop: function(event, ui) {
      $.post(
       ....
      );
    }
  });

  $(".draggable_thing").draggable({
    helper: "clone"
    });

});

Either one works alone, but together, only activeClass fires, and hoverClass doesn't.

2 answers

danwellman 5600
2
points
This was chosen as the best answer

You should be able to use both of these configuration options together on the same droppable, it works for me :) It's not related to the drop callback either (unless you're doing something really insane within the callback!), as using all three options also works for me. See this demo page which shows both classes and the callback function

Do the class names get added in Firebug?

The active class is applied to the element as soon as you start dragging a draggable element that the droppable accepts. The hover class is applied when the draggable is over the droppable (within the configured tolerance).

Answered almost 8 years ago by danwellman
  • Aha, you pointed me in the right direction. Both classes do get added. But since both classes added borders, the activeClass border was simply overriding the hoverClass. That's pretty weird, since the class of the droppable at rest has a border too. Scott Burton almost 8 years ago
0
points

From the example in the jQuery UI documentation, it looks like you need to set the class in the drop function, as follows:

$("#draggable").draggable();
$("#droppable").droppable({
    hoverClass: 'ui-state-active',
    drop: function(event, ui) {
        $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
    }
});

You can see the example here: http://jqueryui.com/demos/droppable/#visual-feedback

Although in their documentation it doesn't mention that you can't use them together, but I suspect it maybe related to the drop function. Also, I would ensure your on the newest version as it's possible there was a bug.

Answered almost 8 years ago by Darryl Hein
  • Why the -1? Darryl Hein almost 8 years ago
  • because you don't need to set the class in the drop function ;) danwellman almost 8 years ago
  • Can't say it's "wrong" which is what a not helpful indicates. It just isn't necessary to do this that way, although it does work and in some cases might be the only way (as you mentioned). Darryl Hein almost 8 years ago
  • 'Not helpful' indicates that the answer was not helpful, not necessarily 'wrong'. You can do anything in the callback function, including selecting the droppable element and manually adding the class name to it using standard jQuery. That doesn't mean it's the best, or even the 'right' way to do it. In this case there *is* a configuration option used to set the class name on a droppable when an accepted draggable is over it. Using this configuration is not the only way to do it but it is without doubt the best way to do it, so your advice to use the callback function instead of the configuration option in this case is 'not helpful' because it is clearly not the best way to achieve the end result. danwellman almost 8 years ago
  • Well, I guess even though this site is related to the SO group of sites, then it works completely differently. There people don't down vote your question just because it's not completely right. They down vote when it's actually wrong. Darryl Hein almost 8 years ago
  • but your answer wasn't even 'not completely right'. Your suggestion would add the class name 'ui-state-highlight' *after* the draggable had been dropped on the droppable and the class name would then stay on the element indefinitely. The hoverClass option works completely differently to this - the class name is added to the element temporarily while the draggable is actually hovering over the droppable. I'm sorry that you feel this way, but I don't feel that I made the wrong choice when I selected the 'not helpful' button. As you mention above, the button does say 'not helpful' it doesn't say 'completely wrong'. danwellman almost 8 years ago
  • "helpful" doesn't mean "utterly and completely correct". It means helping to solve the question; even if it's not completely correct, or the "best way", I would argue that this question was very helpful. (Now, if it was so wrong nothing about it contributed to the questioner's ends, it would be different) Jonathan Castello almost 8 years ago
  • Sorry, this -answer- was very helpful. Typo. Jonathan Castello almost 8 years ago
  • You said it looked like the class name needed to be set in the drop callback. It didn't. The drop callback in your example sets the class name *after* the draggable has been dropped which in no way answers the question 'Why doesn't my jQuery droppable work with both activeClass and hoverClass'. You said you suspected it was the drop callback causing the problem. It wasn't. danwellman almost 8 years ago