Question

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

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

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

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

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对象来包含位置，但这不是强制性的。与演示类相同）

$(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

编辑：作为一个额外的，可以通过着色每个将被选中为红色的元素来给出相交的简单指示：

.ui-selecting{
    background: red;
}

如何在不崩溃的情况下将div绘制到特定位置已经退出div或没有覆盖

1 个答案: