可以使用JQuery UI的“droppable”和“sortable”组件来实现避免拖动元素重叠的效果。具体实现步骤如下：

1. 首先，在HTML文件中定义需要拖动的元素和放置的容器：

  
Element 1
  
Element 2
  
Element 3
  
Drop here

2. 然后，在JavaScript文件中通过JQuery选择需要进行拖动和放置的元素，并将它们转换为可拖动和可放置的元素：

$( function() {
  $( ".draggable" ).draggable({
    revert: "invalid"
  });
 
  $( ".droppable" ).droppable({
    drop: function( event, ui ) {
      // 在这里处理元素放置的逻辑
    }
  });
});

3. 当元素被拖动到容器中时，可以在“drop”事件中编写代码来处理元素被放置的逻辑。例如，可以使用“sortable”组件来重新排列放置的元素：

$( function() {
  $( ".droppable" ).droppable({
    drop: function( event, ui ) {
      var dropped = ui.draggable;
      var droppedOn = $(this);
 
      // 将拖动的元素放置在目标元素中
      $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
 
      // 重新排列放置的元素
      $( ".droppable" ).sortable();
    }
  });
});

通过这样的方式，可以避免拖动元素重叠的问题。