Блог

Главная - Вопросы по программированию - Сортируемый пользовательский интерфейс jQuery — соединение с вложенными сортируемыми разделами

Сортируемый пользовательский интерфейс jQuery — соединение с вложенными сортируемыми разделами

#javascript #jquery-ui

#javascript #jquery-пользовательский интерфейс

Вопрос:

Я использую сортируемый пользовательский интерфейс jQuery, чтобы попытаться создать группу сортируемых divs, которые также потенциально могут быть divs, к которым применяется сортировка. И эти сортируемые таблицы должны иметь возможность перемещать элементы друг между другом.

Я могу передавать элементы из родительского сортируемого div в дочерние сортируемые div, но я не могу вернуть элементы от дочерних элементов родителям.

Возможно ли это?

 <div id="block-container">
  <div class="block">block1</div>
  <div class="sub-wrapper">
    <div class="block-sub-container">
      <div class="block"></div>
      <div class="block"></div>
    </div>
  </div>   
</div>


$('#block-container').sortable({connectWith: ".block-sub-container"});
$('.block-sub-container').sortable({connectWith: "#block-container"});

Вот с чем я работаю: http://jsfiddle.net/5pm24 /

Вы можете видеть, что внешние элементы можно перетаскивать в черные ящики, но как только они там, их нельзя вернуть обратно.

Я хочу получить .block из .block-sub-container для перемещения непосредственно под #block-container .

Ответ №1:

На самом деле это работает нормально, однако вы устанавливаете float:left для .block родительского #block-container сокращения пустой размер. Потому что вы не установили явный размер для родительского элемента. Если вы не хотите устанавливать явный размер, я думаю, вы можете установить overflow:auto для него, и проблема будет решена.

 #block-container {
  /* set border to see its boundary */
  border:1px solid black;
  overflow:auto;
}

ДЕМОНСТРАЦИЯ.

Хотя overflow:auto помогает отображать границу для переноса всего содержимого, но похоже, что иногда перетаскивание не работает ожидаемо, когда вы опускаете элемент внутри границ. Лучшее решение — зафиксировать размер контейнера, это также предотвратит мерцание при перетаскивании. Протестируйте эту демонстрацию, чтобы увидеть разницу.

Метки: