1

In this question, draggables are created on the fly, when the mouse enters the element to drag.

I'd like to do the same kind of thing, but with droppables : decides whether to make the element droppable only when the dragged element arrives over it. I'm sure it's possible but after a bit of research, I couldn't make it.

I tried things like this, but failed:

jQuery.fn.liveDroppable = function (opts) {
    this.live("mouseover", function() {
        if (!$(this).data("livedropinit")) {
            $(this).data("livedropinit", true).droppable(opts);
            $(this).trigger('dropover');
        }
    });
};
Community
  • 1
  • 1
glmxndr
  • 45,516
  • 29
  • 93
  • 118
  • Why do you want to do this? The droppable has no visible functionality anyway except when something hovers on top. – Noufal Ibrahim Oct 20 '10 at 13:53
  • @Noufal : because I have a LOT of droppables, and attaching the events to all of them at once is too expensive. I'd like to have the events attached only when needed, i.e. on a drop action, only for those that really need it. – glmxndr Oct 20 '10 at 14:00
  • Makes sense. I think though that that droppable behaviour is exercised on the mouseover event. Making something droppable only *after* you're hovering on top doesn't sound like it'd work. – Noufal Ibrahim Oct 20 '10 at 14:06

2 Answers2

4

I got this to work by binding it to JQuery using the methods described on this post for draggable. The only problem is that it seems to have an issue on nested droppables which I am currently investigating. Here's the modified version. I had to change it to "mouseenter".

(function ($) {
       $.fn.liveDroppable = function (opts) {
          this.live("mouseenter", function() {
             if (!$(this).data("init")) {
                $(this).data("init", true).droppable(opts);
             }
          });
       };
}(jQuery));

Now instead of calling it like:

$(selector).droppable({opts});

...just use:

$(selector).liveDroppable({opts})
Community
  • 1
  • 1
zach
  • 346
  • 2
  • 9
  • 1
    at least in jquery 1.10 on firefox, the mouseenter and mouseover events are not called while dragging, so this solution only works for elements the user has moved over before starting to drag. – Remember Monica Oct 01 '13 at 12:48
0

Would this work for you? It's the .hover(); function. Not sure if you've tried it yet. http://api.jquery.com/hover/

Micharch54
  • 576
  • 1
  • 7
  • 15
  • You could probably simply do the .hover() and append the html or something so that it has the hoverable tag. You might have to bind the element using something like livequery, not sure. – Micharch54 Oct 20 '10 at 14:38