CODEWITHSUNDEEP
javascriptjquerypluginsdrag-and-drop
Shawn31313
Shawn31313

Reputation: 6052

Making a draggable element drop on a target

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/

Upvotes: 2

Views: 110

Answers (1)

mowwwalker
mowwwalker

Reputation: 17334

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/

Upvotes: 2

Related Questions