Сделайте класс сортируемым с другими классами, названными так же, только если они являются родными братьями с jquery - PullRequest
Новая
       2

Сделайте класс сортируемым с другими классами, названными так же, только если они являются родными братьями с jquery

0 голосов
/ 01 ноября 2010

Пояснение:

Я пытаюсь сделать портлеты сортируемыми, но пытаюсь связать их с любыми столбцами, которые являются родственными элементами

Я бы хотел, чтобы мое веб-приложение автоматически применяло взаимодействие jquery ui sortable ко всем элементам div с классом .column.

В этом решении мне нужны две маленькие хитрости, но не все так просто, как $(".column").sortable() ...

  1. Мне нужны столбцы для connectWith любых других столбцов, которые являются братьями и сестрами
  2. Я бы хотел бы решение для применения к любым .column элементам, которые генерируются динамически, я искал что-то похожее на мою новую любимую игрушку, .live() , безрезультатно ... хотя может сработать пользовательское событие для обнаружения создания элемента .column, хотя не знаю, как это сделать.

EX:

Разметка 

<div id="container1" class="column-container">
  <div class="column">
    <div class="portlet"></div>
    <div class="portlet"></div>
    <div class="portlet"></div>
  </div>
  <div class="column">
    <div class="portlet"></div>
    <div class="portlet"></div>
    <div class="portlet"></div>
  </div>
  <div class="column">
    <div class="portlet"></div>
    <div class="portlet"></div>
    <div class="portlet"></div>
  </div>
</div>

Javascript 

$(document).ready(function(){
  $columns = $(".column");
  $columns.sortable({
    connectWith: $columns.parent().find('.column')  //this untested, but you get the idea... i'll write back with the results of this, might be some good direction
  });
});

Я бы хотел, чтобы столбцы в container1 можно было сортировать с другими столбцами в container1, но не container2. Также в container2 ш / container2, но не container1.

Ответы [ 2 ]

2 голосов
/ 01 ноября 2010

Насколько я понимаю, это проще, чем вы делаете.

Для сортируемых столбцов в контейнере, из вашей разметки, активация jquery будет: 

$('.column-container').sortable();

Селектор, который у вас есть на вашем сортируемом, на самом деле делает портлеты сортируемыми.

Что касается живых событий, обратитесь к этому ранее заданному вопросу: живое перетаскивание

EDIT

После вашего комментария селектор будет: 

$('.column-container').sortable({items: '.portlet'});

РЕДАКТИРОВАТЬ 2: Поскольку это все еще не работает, вот полный пример: 

    <style type="text/css">
        .column-container { width: 100%; }
        .column-container .column { float: left; width: 100px; background: #ccc; margin-left: 10px; }
        .column-container .column .portlet { border: 1px solid black; padding: 2px; margin: 2px; }
    </style>
    <script type="text/javascript">
        $(function () {
            $('.column-container').sortable({items: '.portlet'});
        });
    </script>
    <div id="container1" class="column-container">
        <div class="column">
            <div class="portlet">#container1 .column[0] .portlet[0]</div>
            <div class="portlet">#container1 .column[0] .portlet[1]</div>
            <div class="portlet">#container1 .column[0] .portlet[2]</div>
        </div>
        <div class="column">
            <div class="portlet">#container1 .column[1] .portlet[0]</div>
            <div class="portlet">#container1 .column[1] .portlet[1]</div>
            <div class="portlet">#container1 .column[1] .portlet[2]</div>
        </div>
        <div class="column">
            <div class="portlet">#container1 .column[2] .portlet[0]</div>
            <div class="portlet">#container1 .column[2] .portlet[1]</div>
            <div class="portlet">#container1 .column[2] .portlet[2]</div>
        </div>
    </div>
    <div style="clear:both"></div><br />
    <div id="container2" class="column-container">
        <div class="column">
            <div class="portlet">#container2 .column[0] .portlet[0]</div>
            <div class="portlet">#container2 .column[0] .portlet[1]</div>
            <div class="portlet">#container2 .column[0] .portlet[2]</div>
        </div>
        <div class="column">
            <div class="portlet">#container2 .column[1] .portlet[0]</div>
            <div class="portlet">#container2 .column[1] .portlet[1]</div>
            <div class="portlet">#container2 .column[1] .portlet[2]</div>
        </div>
        <div class="column">
            <div class="portlet">#container2 .column[2] .portlet[0]</div>
            <div class="portlet">#container2 .column[2] .portlet[1]</div>
            <div class="portlet">#container2 .column[2] .portlet[2]</div>
        </div>
    </div>
0 голосов
/ 01 ноября 2010

Это решение работает при применении идентификатора к родителю, я посмотрю, не смогу ли я установить более гибкое решение.

разметка: 

<div id="container1" class="column-container">
  <div class="column">
    <div class="portlet"></div>
    <div class="portlet"></div>
    <div class="portlet"></div>
  </div>
  <div class="column">
    <div class="portlet"></div>
    <div class="portlet"></div>
    <div class="portlet"></div>
  </div>
  <div class="column">
    <div class="portlet"></div>
    <div class="portlet"></div>
    <div class="portlet"></div>
  </div>
</div>

javascript: 

//connects with `#container1 .column` and `#container2 .column`
$('.column').sortable({
  connectWith: $(this).parent().attr('id') + ' .column'
});

В паре с

Это перетаскиваемое расширение jquery, найденное в этот вопрос 

(function ($) {
   jQuery.fn.liveDraggable = function (opts) {
      this.live("mouseover", function() {
         if (!$(this).data("init")) {
            $(this).data("init", true).draggable(opts);
         }
      });
   };
})(jQuery);
...