Search code examples
jqueryhtmldrag-and-drop

drag and drop without jqueryui?

I'm working on a jquery plugin and added in some drag and drop features through the HTML5 drag attributes. Everything works fine except for one caveat, assigning the function names to their targets.

The functions are in the plugin I'm writing, but I'm not sure how I can call those from a element's attribute without specifying the jquery object itself.

For example, suppose I used my plugin as such:

ztable = $('#mytable').ZTable();

And then in plugin code itself, I'd have:

myElement.attr('ondrop', 'ztable.zdrop(event)');

Specifying the variable name was the only way I can get it to see the function, and obviously this isn't a viable solution.

I decided on using the HTML5 attributes for drag events because it's there and works smoothly. I don't want to rely on jquery UI to add dragging for this plugin. Is there any way around this or a better solution that doesn't rely on additional 3rd party libraries?

Solution

  • Consider this:

    $(myElement).on('ondrop', function(event){
  ztable.zdrop(event);
});

    This assumes that your plugin exposes zdrop().

    But really, in your plugin code, I am not sure why it's not more like:

    this.element.on("ondrop", this.zdrop);