Javascript 如何将div绘制到特定位置而不折叠已退出div或不覆盖

我正在做一个演示，页面中有可选择的jQuery用于创建方形块（区域）

用户可以选择任何区域并用颜色写一些注释，整个块将显示并指定位置。它工作得很好

但我主要关心的是，如果有人选择了相同的区域或选择了包含已存在块的区域，我如何限制它

两个街区都应该是出口

两者不应处于同一位置

---

添加多个矩形的第一步是使用另一个id，或者直接设置创建的div：

    $('<div>')        
    .css({
      'position': 'relative',
      'width': width,
      'height': height,
      'left': beginX,
      'top': beginY,
      'background': '#000000'
    })
    .appendTo(this);

一个示例实现（冒昧地引入了一个Rect对象来包含位置，但这不是必须的。与demo类相同）

---

添加多个矩形的第一步是使用另一个id，或者直接设置创建的div：

    $('<div>')        
    .css({
      'position': 'relative',
      'width': width,
      'height': height,
      'left': beginX,
      'top': beginY,
      'background': '#000000'
    })
    .appendTo(this);

一个示例实现（冒昧地引入了一个Rect对象来包含位置，但这不是必须的。与demo类相同）

---

协调的一些条件？如果元素与它们的位置冲突，抛出提示…协调的一些条件？如果元素与其位置冲突，将引发提示。。。

$(function() {

    var startpos;

    function getpos(e){return {X:e.pageX, Y:e.pageY};}

    function Rect(start,stop){
        this.left = Math.min(start.X,stop.X);
        this.top = Math.min(start.Y,stop.Y);
        this.width = Math.abs(stop.X - start.X);
        this.height = Math.abs(stop.Y - start.Y);
    }   

    $('#tar').selectable({
      start: function(e) {
          startpos = getpos(e);
      },
      cancel: '.demo',
      stop: function(e) {        
          if($(".ui-selected", this).length) return;          
          var rect = new Rect(startpos,getpos(e)); 
          $('<div>')        
              .css({
              'width': rect.width,
              'height': rect.height,
              'left': rect.left,
              'top': rect.top          
          })
          .addClass('demo')
          .appendTo(this);          
      }
    });
  });

.ui-selecting{
    background: red;
}