javascript - 使可拖动元素落在目标上

Question

现在我知道你们看到标题时在想什么了。您可能认为我在谈论 jQuery UI 可拖动。但我实际上是在谈论我为社区制作的插件。我正在尝试为我的插件创建一个目标。它的工作原理如下所示:

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

如您所见，它运行良好。

首先，让我解释一下假设会发生什么。那么我想要的是，如果元素被放入目标中...... targ.on() 被启动。这是我插件中的 onTarget 功能。这和 offTarget(targ.off()) 在我的插件中不起作用。

这是我的插件中的内容:

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

那么我的插件设置代码是:

$(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() {}
    });
});

我不明白为什么它不起作用。

如果你想看一看，这是我的实际插件:

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

Answer 1

尝试:

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

您会看到“this”指的不是元素，而是包含函数的对象。

将元素作为参数传递:

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

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