Ui可拖动覆盖

您可以使用 结束 和 出来 事件,以禁用背面的事件。大致如下:

$(function() {
  $("#draggable").draggable();
  $(".droppable").droppable({
    tolerance: 'pointer',
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Dropped!");
    }
  });
  $(".droppable2").droppable({
    tolerance: 'pointer',
    drop: function(event, ui) {
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Dropped!");
    },
    over: function(event, ui) {
      $(".droppable").droppable("disable")
    },
    out: function(event, ui) {
      $(".droppable").droppable("enable")
    }
  });
});

请注意,如果您不想看到禁用时的视觉反馈,则需要更改CSS的禁用状态。

http://jsfiddle.net/wppykb9a/2/

如果你想用它 z索引 ,这有点复杂,但您可以使用的一种方法是 document.elementFromPoint() 。它返回特定点处最顶部的元素,因此在drop中,您可以将dragable放在后面,然后检查哪个dragable在drop点处最高。这样地:

$(function() {
  window.a = 10;

  $(".droppable,.droppable2").draggable();

  $("#draggable").draggable({
    tolerance: 'pointer'
  });
  $(".droppable").droppable({
    accept: "#draggable",
    drop: function(event, ui) {
        var temp = ui.draggable.zIndex();
        ui.draggable.css('z-index', -1000);
        var topDroppable = document.elementFromPoint(event.clientX, event.clientY);
      ui.draggable.css('z-index', temp);
      $(topDroppable)
        .addClass("ui-state-highlight")
        .find("p")
        .html("Dropped!");
    }
  });
});

http://jsfiddle.net/17xn0zvz/

看见 https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint