Question

I am having an issue trying to create a re-useable function for setting up elements as either draggable or droppable.

Creating 2 separate functions for this works:

makedroppable($('.empty_child_article_image'), handleChildDropEvent);

or

makedraggable($('.empty_related_article_image'), handleAlternativeDragEvent);


function makedroppable(droppableClass, specificHandler){   
  droppableClass.droppable( {
    drop: specificHandler,
    hoverClass: 'hovered'
  });  
};

or

function makedraggable(droppableClass, specificHandler){   
      droppableClass.draggable( {
        drop: specificHandler,
        hoverClass: 'hovered'
      });  
    };

This however does not work:

makedroppable($('.empty_child_article_image').droppable, handleChildDropEvent);

    function makedroppable(dragordrop_func, specificHandler) {
       dragordrop_func({
       drop: function(){specificHandler.apply($ ,specificHandler)},
       hoverClass: 'hovered',
     }); 
    }

And I get an error for “dragordrop_func({” with this error in my console

Object [object DOMWindow] has no method ‘each’

I have tried a number of other solutions and from what i’ve read this should work. What am I doing wrong?

Any help or guidance is welcome.

Thank you

Answer 1

The this object reference is lost when you pass $('.empty_child_article_image').droppable as an argument to the function. Inside function makedroppable -> this will be the window object and not your $('.empty_child_article_image') object.

And so the error is thrown because the this object points to window object and not the $('.empty_child_article_image') inside droppable function.