jQuery UI 不同的放置事件，取决于可放置的类

Question

我有 2 个不同的可丢弃类。我想根据放置的可放置类元素执行不同的放置事件（dropBar、dropTile）。这是我的代码：

$(".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
});

正如您所见，这 2 个 droppable 几乎相同，唯一的区别是事件 drop。有没有办法合并这些可删除的语句以免重复代码？我需要在这些 ondrop 函数中添加它，我使用 event、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)