如何将 divs 绘制到特定位置而不折叠已存在 div 或不覆盖

Question

我正在开发一个演示，其中页面具有 select 能够 jQuery 用于创建方块（区域）。

用户可以select任意区域写一些颜色注释，整个块将显示指定位置。它工作正常。

但我主要担心的是，如果某人 select 相同区域或 selecting 区域已经存在 blocks.How 我可以限制它。

两个区块都应该是出口。
两者不应该在同一个位置。

Answer 1

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

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

步骤 1.1 是使位置成为绝对位置，因此后续元素与其他添加的元素不相关。

第 2 步防止重叠。由于使用了 selectable，这可以很容易地通过检查是否选择了任何元素（任何 divs 与 .ui-selected 元素）来完成，并且不要添加新矩形以防在内部选择任何元素停止事件回调：

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

一个示例实现（冒昧地引入一个 Rect 对象来包含位置，但这不是强制性的。与演示相同 class）

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

Demo fiddle

编辑：作为额外的，可以通过给每个元素着色来简单地指示相交，这将是 'selected red':

.ui-selecting{
    background: red;
}

如何将 divs 绘制到特定位置而不折叠已存在 div 或不覆盖

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

html

javascript

css

jquery

jquery-ui-selectable