Как нарисовать div в определенной позиции без сброса уже выходит из div или без переопределения

Question

Я работаю над демонстрацией, где на странице есть выбор jQuery для создания квадратного блока (области).

Пользователь может выбрать любую область и написать некоторый комментарий с цветом, весь блок будет показан указать положение. Работает нормально.

Но моя главная проблема, если кто-то выберет ту же область или выберет область с уже существующими блоками. Как я могу ограничить это.

1. Оба блока должны быть выходами.
2. Оба не должны находиться в одинаковом положении.

DEMO

Answer 1

Первым шагом для добавления нескольких прямоугольников является либо использование другого идентификатора, либо установка непосредственно созданного div:

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

шаг 1.1 должен сделать позицию абсолютной, чтобы последующие элементы не позиционировались относительно других добавленных элементов.

Шаг 2 предотвращает перекрытие. Поскольку используется selectable, это можно сделать довольно легко, проверив, выбраны ли какие-либо элементы (любые div с .ui-selected элемент) и не добавляйте новый прямоугольник в случае, если какой-либо из них выбран внутри обратного вызова события 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);          
      }
    });
  });

Демо скрипка

редактировать: в качестве дополнительной информации можно легко указать пересечение, закрасив каждый элемент, который будет "выделен красным":

.ui-selecting{
    background: red;
}