Question

Now I know what you guys were thinking when you read the title. Your probable thinking that im talking about jQuery UI draggable. But im actually talking about the plugin i’m making for the community. I am trying to create a target for my plugin. It works as you can see here:

http://jsfiddle.net/XvZLn/24/

As you can see it works fine.

First, let me explain whats suppose to happen. Well what I want, is if the element is dropped in the target…the targ.on() gets launched. This is the onTarget feature in my plugin. This and the offTarget(targ.off()) are not working in my plugin.

This is what I have in my plugin:

var targ = {
                            on: o.target.onTarget,
                            off: o.target.offTarget
                        };

Then my plugin setup code is:

$(document).ready(function() {
    $('#drag').jDrag({
        revert: false,
        revertDuration: 500,
        ghostDrop: false,
        ghostRevert: false,
        ghostOpacity: '0.50',
        instantGhost: false,
        activeClass: false,
        handle: false,
        grid: false,
        cookies: false,
        cookieExdate: 365,
        radialDrag: false,
        radius: 100,
        circularOutline: false,
        strictMovement: false,
        distance: 0,
        not: false,
        containment: false,
        target: {
            init: '#container',
            lock: false,
            onTarget: function() {
                $(this).hide();
            },
            offTarget: function() {}
        },
        onPickUp: function() {},
        onDrop: function() {}
    });
});

I don’t see why it wont work.

This is my actually plugin if you want to take a look in it:

http://jsfiddle.net/ZDUZL/89/

Answer 1

Try:

onTarget: function() {
                console.log(this);
                $(this).hide();
            },

You’ll see that “this” isn’t referring to the element, but rather the object that holds the function.

Pass the element as an argument:

if (locker === false) {
    if (statement) {
        targ.on(this);
        lock = false;
    } else {
        targ.off();
        lock = false;
    }
}

http://jsfiddle.net/ZDUZL/91/