jQuery UI가 서로 다른 드롭 이벤트 (드롭 가능 클래스에 따라 다름)

Question

두 개의 서로 다른 드롭 가능한 클래스가 있습니다. 어떤 dropable 클래스 요소가 드롭되었는지에 따라 다른 drop 이벤트 (dropBar, dropTile)를 수행하려고합니다. 당신이이 2 droppables 거의 동일하다 볼 수 있듯이

$(".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) 변수/키워드를 추가해야합니다.

Answer 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)