1

ドロップ可能なターゲットにドロップされた jQuery ウィジェットのコンテキストを取得するにはどうすればよいですか?

たとえば、これはこのコードでドラッグ可能にされたウィジェットです:

In the code that makes the images be draggable

ContentImageHolder.prototype = {

    options: {
        contentInfo: null,
    },

    getContentInfo: function(){
        return this.options.contentInfo;
    },

    makeContentDraggable: function(){

        $(this.element).draggable({
            revert: true,
            scroll: false,

            start:  $.proxy(this, 'dragStart'),
            stop:   $.proxy(this, 'dragStop'),
        });
    },

    _init: function() {
        this.makeContentDraggable();
    }

$.widget("basereality.contentImageHolder", ContentImageHolder);

そして、これはゴミ箱が画像を受け入れることができるようにする私のコードです。

TrashCan.prototype = {

    trashContent: function (event, ui){
        //What do I do here to be able to access the functions of the dropped object
        //droppedObject.getContentInfo();
    },

    _init: function() {
        $(this.element).droppable({
            drop: $.proxy(this, 'trashContent'),
        });
    },
}
$.widget.bridge('trashCan', TrashCan);

オブジェクトで関数を呼び出すことができるように、ドロップ可能にドラッグされた ContentImageHolder のコンテキストを取得することは可能ですか?

同様のキーワードを使用したここでのすべての質問はすべて使用するように言っていますui.draggableが、jQuery ウィジェットではなく DOM オブジェクトを参照しています。jQueryウィジェットを取得することは可能ですか?

4

1 に答える 1

1

初期化された jQuery ウィジェットまたは UI 要素を持つ DOM オブジェクトがある場合は、ウィジェットまたは UI 要素の関数とプロパティに、作成に使用した関数を介してアクセスします。

つまり、.getContentInfo() を呼び出したい場合は、次のように実行できます。

trashContent: function (event, ui){
    // Set a property of contentImageHolder
    $(ui.draggable).contentImageHolder("option", "contentInfo", "something")

    // Access a method of contentImageHolder
    $(ui.draggable).contentImageHolder("getContentInfo");

    // Do whatever....
},

注: オブジェクト ContentImageHolder のタイプに応じて、次のように宣言することができます。

ContentImageHolder = {

    options: {
        contentInfo: null,
    },

    getContentInfo: function(){
        return this.options.contentInfo;
    },

    makeContentDraggable: function(){

        $(this.element).draggable({
            revert: true,
            scroll: false,

            start:  $.proxy(this, 'dragStart'),
            stop:   $.proxy(this, 'dragStop'),
        });
    },

    _init: function() {
        this.makeContentDraggable();
    }
}

IE: 適切でない場合はプロトタイプを変更しないでください。そうしないと、すべてのオブジェクトのように、関数が属していない場所に関数が配置される可能性があります。

詳細については、jQuery Widget Factory のドキュメントを参照してください: http://api.jqueryui.com/jQuery.widget/

それが役立つことを願っています!

== 編集 == ドロップされるオブジェクトのタイプがわからないが、一般的な名前で関数を呼び出したい場合、私が考える最も簡単な方法は、パラメーターを追加することです次のようなオブジェクトの jQuery データに:

// Inside ContentImageHolder._init() :
$(this.element).data("basereality.type", "contentImageHolder")

これにより、ドラッグ可能なハンドラー内の型を確認できます。

trashContent: function (event, ui){
    // Get its type like this:
    var elemType = $(ui.draggable).data("basereality.type");

    // Call the getContentInfo function
    $(ui.draggable)[elemType]("getContentInfo");

    // Do stuff
},

次に、「basereality.type」内の値が、jQuery の初期化関数の名前と同じであることを確認する必要があります。

于 2013-02-28T06:18:58.147 に答える