2017-09-09 11 views
0

私は2つの異なるドロップ可能クラスを持っています。ドロップ可能なクラス要素がドロップされたかどうかに応じて、異なるドロップイベント(dropBar、dropTile)を実行します。ここに私のコードは次のとおりです。あなたはこれらの2 droppablesはほぼ同一であり、見ることができるようにjQuery UIドロップ可能なクラスに応じた異なるドロップイベント

$(".droppable-tile").droppable({ 
     accept: '.draggable-task, .task, .daily-task', 
     tolerance: 'pointer', 
     hoverClass: "tile-draggable-hover", 
     drop: dropTile 
    }); 
$(".droppable-bar").droppable({ 
     accept: '.draggable-task, .task, .daily-task', 
     hoverClass: "tile-draggable-hover", 
     tolerance: 'pointer', 
     drop: dropBar 
}); 

、唯一の違いは、イベントの低下です。コードを繰り返さないように、これらの削除可能な文をマージする方法はありますか?私はこれらのondrop関数に、イベント、UI、$(this)変数/キーワードを使用することを追加する必要があります。

答えて

1

あなたはこのようにそれを行うことができます。

$(".droppable-bar,.droppable-tile").droppable({ 
     accept: '.draggable-task, .task, .daily-task', 
     hoverClass: "tile-draggable-hover", 
     tolerance: 'pointer', 
     drop: function (ev, ui) { 
      // Check droppable element by class 
      if ($(this).hasClass('droppable-tile')) { 
       // your droppable-tile code 
      } 
      else if ($(this).hasClass('droppable-bar')) { 
       // your droppable-bar code 
      } 
     }, 

    }); 

Online output (jsfiddle)

関連する問題