JQuery плавающие коробки разного размера - PullRequest
Новая
       0

JQuery плавающие коробки разного размера

1 голос
/ 19 августа 2010

У меня есть 9 плавающих блоков на странице с 3 столбцами, сгенерированными из этого JQ-скрипта: 

<script type="text/javascript"> 
    $(function() { 
        $("ul.connectedSortable").sortable({handle:'.kpiValueContainer', connectWith:'trysomethingelse', placeholder:'ui-state-highlight', revert: true});
    }); 
</script>

Фактически столбцы - это "ul", а поля - "li", так что есть 3ящики "li's" в каждом столбце "ul's".

Это мой HTML: 

<div class="boxContainer">
   <ul id="column1" class="connectedSortable">
      <li class="box1"></li>
      <li class="box2"></li>
      <li class="box3"></li>
   </ul>
   <ul id="column2" class="connectedSortable">
      <li class="box4"></li>
      <li class="box5"></li>
      <li class="box6"></li>
   </ul>
   <ul id="column3" class="connectedSortable">
      <li class="box7"></li>
      <li class="box8"></li>
      <li class="box9"></li>
   </ul>
</div>

Мой вопрос: как я могу иметь ящики разного размера в одном столбце, не портявся сцена =)

Мой заполнитель должен соответствовать текущему движущемуся блоку, то есть он должен "знать", что это блок размера A, B или C, и таким образом адаптироваться к размеру блока.

Мой CSS: 

.boxContainer
{
    margin:0px;
    width:1100px;
    height:auto;}

.column1, .column2, .column3 { 
    list-style-type: none;
    margin:0 10px 0 0px;
    float:left;
    height:auto;
    width:300px;}

html>body .column1 li, .column2 li, .column3 li { 
    height:auto;
    width:300px;}

.column1 li, .column2 li, .column3 li {
    margin:50px 0 0 0px;
    height:255px;
    width:300px;}

Ответы [ 2 ]

5 голосов
/ 19 августа 2010

Я думаю, что все, чего вам не хватает, это forcePlaceholderSize:true в вашем сортируемом определении.

Что в сочетании с placeholder: 'ui-state-highlight' сделает заполнители того же размера, что и поле, которое вы перемещаете ...

Вот пример того, как это работает: http://jsfiddle.net/ryleyb/Y5fzX/1/

0 голосов
/ 28 января 2016

Я не знаю, это именно то, что вы ищете, но вы пытались установить высоту / ширину заполнителя на высоту / ширину текущего перетаскиваемого элемента в sortable.start ()?

$(selector).sortable({ start: function(event, ui) { ui.placeholder.width(ui.item.width()); ui.placeholder.height(ui.item.height()); } });

...