yenta風の特定の位置までドラッグしたらフェードアウトする処理を実装する

$('.draggable').draggable({
    drag: function() {
      var offset = $(this).offset();
      var xPos = offset.left;
      var yPos = offset.top;
      if (xPos >= 210) {
        $('.xxx).addClass('fadeout-right').delay(700).fadeOut(1);
      }
      if (xPos <= -210) {
        $('.xxx).addClass('fadeout-left').delay(700).fadeOut(1);
      }
      if (yPos <= -250) {
        $('.xxx).addClass('fadeout-top').delay(700).fadeOut(1);
      }
      if (yPos >= 300) {
       $('.xxx).addClass('fadeout-bottom').delay(700).fadeOut(1);
      }
    }
  });

.fadeout-right {
  transform: rotate(30deg) scale(0.8);
  transition: 1s;
  opacity: 0;
  margin-left: 200px;
}

.fadeout-left {
  transform: rotate(-30deg) scale(0.8);
  transition: 1s;
  opacity: 0;
  margin-left: -200px;
}

.fadeout-top {
  transform: rotate(30deg) scale(0.8);
  transition: 1s;
  opacity: 0;
  margin-bottom: 200px;
}

.fadeout-bottom {
  transform: rotate(-30deg) scale(0.8);
  transition: 1s;
  opacity: 0;
  margin-bottom: -200px;
}

ちなみにスマホだとブラウザのドラッグイベントが検知できないので、 jquery-ui-touch-pinch.js のライブラリを使いました。