javascript - ドラッグ可能な要素をターゲットにドロップする

原文 javascript jquery plugins drag-and-drop

タイトルを読んだときに、皆さんが何を考えていたかがわかりました。ドラッグ可能な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/
答え
試してください:

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/
関連記事

javascript - Googleスロットルは、クライアント側のjsapi呼び出しを使用してユーザーの場所を取得しようとしますか?

javascript - jquery / Javascript-タイムスタンプまでのすべての日付

javascript - イベント後のJavaScriptの戻り

javascript - nicescrollプラグインを水平に動作させる方法は誰でも知っています

javascript - jQuery JSON解析-予期しないトークンエラー

javascript - Chromeは注入されたスクリプトで変数を宣言することを拒否します

javascript - SQLite openDatabaseで複数のデータベースを作成する

javascript - JavaScript:ブラウザベースのXMLツリーエディタ

javascript-objects - JavaScriptオブジェクト作成メソッド

javascript - JavaScript変数にJSONを設定する