CSS элементы абсолютного позиционирования внутри div

Question

У меня есть .wall div с некоторыми .toy div s внутри. Я хочу расположить toy внутри wall. float:left собственность сделала это для меня хорошо.

Теперь проблема в том, что я хочу добавить position:absolute для toy div, чтобы потом его можно было перетаскивать. Как я могу сделать это с помощью Javascript или CSS?

Применяя position:absolute, все toy попадут в верхний левый угол wall, перекрывающего и скрывающего друг друга.

Ширина и высота wall постоянны, но ширина и высота toy s являются переменными, также число toy div является динамическим и с увеличением числа toy s нужно выстроить в ряды .

Любые предложения будут полезны, обратите внимание, я не могу избежать использования position:absolute для перетаскивания.

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
 <style>
  body{
   text-align:center;
  }
 .clearfix{
  clear:both;
 }
  .wall {
   border: 5px solid #cde;
  margin:auto;
  width:200px;
  padding:10px;
  }
 .toy{
  background-color: #BBCCEE;
  border:1px solid #8899BB;
  margin:5px;
  width: auto;
  padding:5px;
  float:left;
 }
 .tall{
  padding-top:10px;
 }
 </style>
 <script>
  $(document).ready(function() {
  $('.toy').each(function(index) {
   var position = $(this).offset();
   var prevPosition = $(this).prev().offset();
   $(this).css({
    //top: position.top,
    //left:position.left,
    //position:'absolute',
   });
  });
 });
 </script>
<div class='wall'>
 <div class='toy'>T1</div>
 <div class='toy'>T2</div>
 <div class='toy'>T3333333</div>
 <div class='toy'>T4</div>
 <div class='toy'>T5</div>
 <div class='toy tall'>T6</div>
 <div class='toy'>T7</div>
 <div class='toy'>T8</div>
 <div class='clearfix'></div>
</div>

Вот код в JSBin .

Answer 1

Добавить

position:relative

К стене div

Answer 2

Я работаю над сайтом, который делает именно это (извините за неанглийский материал):

http://moveit.canassa.com/cartao/4/

Ссылка теперь не работает, но вот jsFiddle, который показывает, о чем я говорю:

http://jsfiddle.net/canassa/Z9N3L/

"Игрушечный" div использует абсолютную позицию:

.toy{
    width: 100px;
    height: 25px;
    position: absolute;
    z-index: 0;
}

Проблема с абсолютным положением заключается в том, что игрушка будет относиться к странице, а не к «настенному» контейнеру, чтобы исправить это, вы должны сделать настенный контейнер относительным:

#wall{
    position: relative;
    overflow: hidden;
}

Переполнение: скрытый - тоже хороший трюк, который я нашел. Это делает перетаскиваемые объекты "под" стенкой контейнера.

Нет большого секрета, чтобы сделать его перетаскиваемым, используя jQuery:

// Creates a toy div inside the wall
$(MV.wallId).append('<div class="toy" id="' + this.getId() + '"></div>');

box = this.getBox(); // return the "toy" that I've just created.
$('#' + this.getId()).draggable();  // make it draggable

Answer 3

Это было бы намного проще, если бы вы просто использовали jQueryUI .draggable(). Не требует расположения элементов.

Если вы не хотите использовать этот плагин, то у вас есть правильная идея. Позвольте элементам встать на свои места, а затем рассчитать их положение и установить position: absolute и все, что left и top окажется во время выполнения.

Установите .wall равным position: relative. Тогда:

var tPos;

$('.toy').each(function(index) {
    tPos = $(this).position();
    $(this).css({
        left: tPos.left,
        top: tPos.top
    });
};
$('.toy').css({
    position: absolute
});

Высота .wall и ширина каждого .toy уменьшаются, когда игрушки абсолютно расположены, но вы можете просто добавить еще несколько строк, чтобы получить / установить их ширину и высоту в вышеупомянутых .each петлях.

Это, очевидно, не работает, если новые игрушки могут быть добавлены динамически без перезагрузки страницы, как вы предлагаете. Чтобы справиться с этим, вы можете переключить их обратно на position: relative, добавить новый, получить позицию нового в потоке, затем установить позицию и переключиться обратно на position: absolute. Любые элементы, которые были перетащены с места, были бы пробелами в потоке, но я не вижу простого способа обойти это.

Answer 4

В контейнере div для каждого .toy должен быть установлен position:relative. Таким образом, позиция 0 для его дочерних элементов становится его верхним левым углом. Как это:

<div class="parent">
    <div class="child">Blah.</div>
    <div class="child">Blah.</div>
</div>

И

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 10px; /* This is 10 pixels from the parents left side */
  top: 10px; /* This is 10 pixels from the parents top side */
}

Удачи.

Answer 5

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