2

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

1 Answer 1

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.

4
  • Thanks for your reply. Is there a way to ensure that it passes it correctly? Or force it too?
    – edev.io
    Jan 28, 2012 at 15:15
  • As some further help for people I did make it work in a slightly more ugly way. This being to send droppable as a string and then wrap it in square brackets. makedroppable($('.empty_child_article_image'), "droppable" , handleChildDropEvent); function makedroppable(selector, dragordrop, specificHandler) { $(selector)[dragordrop]({ drop: dropFunction, accept: '.ui-draggable', hoverClass: 'hovered' )} }
    – edev.io
    Jan 28, 2012 at 15:39
  • @user1166885 - you lose the context when you pass it as an argument. The draggable has tb be called as $('.empty_child_article_image').draggable. Jan 28, 2012 at 15:42
  • Ok got it. Thanks for your knowlegde and time SKS
    – edev.io
    Jan 30, 2012 at 15:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.