How to draw divs to a specific position without collapse already exits div or without override

Question

I am working on a demo where page have selectable jQuery for creation square block(area).

用户可以选择任何区域并用颜色写一些注释,整个块将显示指定位置.它工作正常.

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

1. 两个块都应该退出.
2. 两者都不应该在同一个位置.

DEMO

Answer 1

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

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

步骤1.1是使位置绝对,因此后续元素不与其他添加元素相关.

第2步是防止重叠.由于使用了selectable,因此可以通过检查是否选择了任何元素(带.ui-selected元素的任何div )来完成此操作,并且如果在stop事件回调中选择了任何元素,则不添加新矩形:

 if($(".ui-selected", this).length)return;

一个示例实现(冒昧地引入一个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;
}