jQueryUI（Draggable）のstop内からdrag内の変数にアクセスしたい

Question

###前提・実現したいこと
下記ソースコードのdrag: function ()内の変数$hogeを、stop: function ()内から取得したいのですが、どのように指定すればよろしいでしょうか？

###該当のソースコード

$($element).each(function () {
  $(this).draggable({
    drag: function () {
      var $hoge = $('div p');
    },

    stop: function () {
      console.log($hoge); //$hoge is not definedのエラー
    },
  });
});

###補足
上記はjQueryUIのDraggableを使用しています。

何卒、よろしくお願い致します。

Answer 1

jQueryのdataの中に突っ込んでおくことで、メソッド間での受け渡しが出来ます。

$($element).each(function () {
  $(this).draggable({
    drag: function () {
      var $hoge = $('div p');
      $(this).data('hoge', $hoge);
    },

    stop: function () {
      var $hoge = $(this).data('hoge');
      console.log($hoge);
    },
  });
});

Comments

[退会済みユーザー]

ご回答ありがとうございます。ご指摘の方法で実現することができました。勉強させていただきます。

Answer 2

外側で宣言するのではまずいっすかね。

var $hoge;

$($element).each(function () {
  $(this).draggable({
    drag: function () {
      $hoge = $('div p');
    },

    stop: function () {
      console.log($hoge); //$hoge is not definedのエラー
    },
  });
});

Comments

[退会済みユーザー]

ご回答ありがとうございます。大変申し訳ないのですが、外側での宣言は今回の場合では少々趣旨が異なってしまいます。