jQuery UI 不同的掉落事件，取决于可掉落物 class

Question

我有 2 个不同的可丢弃 classes。我想根据放置在哪个可放置 class 元素上执行不同的放置事件（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 个可掉落物几乎相同，唯一的区别是事件掉落。有没有办法合并这些可删除的语句，以免重复代码？我需要在这些 ondrop 函数中添加我使用 event,ui, $(this) variables/keywords。

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)

jQuery UI 不同的掉落事件，取决于可掉落物 class

jQuery UI different drop events, depending on droppable class

jquery-ui

jquery-ui-droppable