Question

我有2个不同的droppable类。我想执行不同的drop事件（dropBar，dropTile），具体取决于丢弃的droppable类元素。这是我的代码：

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

正如您所看到的，这两个droppable几乎相同，唯一的区别是事件下降。有没有办法合并这些droppable语句，以便不重复代码？我需要在这些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)

jQuery UI不同的drop事件，取决于droppable类

1 个答案: