Не удается получить сортировку jQuery для работы без столбцов - PullRequest
Новая
       18

Не удается получить сортировку jQuery для работы без столбцов

0 голосов
/ 24 марта 2012

Я боролся с сортируемым jQuery.Первоначально я попытался выполнить Nettuts учебник на сортируемом, но нашел метод столбца макета панели мониторинга слишком сложным.Я хотел иметь двойные виджеты для графиков и т. Д. Итак, у меня есть родительский виджет div с фиксированной шириной и я не использую столбцы.Фиксированная ширина может вместить 2 обычных виджета или 1 двойной виджет шириной.Виджеты просто аккуратно оборачиваются внутри контейнера, и я хочу просто отсортировать порядок, в котором находятся виджеты.

У меня проблема с сортируемым поведением.Я могу перетаскивать и сортировать виджеты, но заполнитель не находится в правильном месте, когда происходит щелчок и перетаскивание.Если я возьму нижний дескриптор виджета и переместу его, заполнитель появится вверху, а его ширина контейнера виджета (#widgets) будет не такой, как сам виджет.По столбцам я вижу, что заполнитель может получить ширину от столбца, но в моем случае даже левая / верхняя позиция неверна.Заполнитель находится в верхней части контейнера виджета.

Плюс анимация всегда перемещает виджет в верхний левый угол контейнера виджета.Как будто он думает, что точка вставки или предыдущее местоположение находились в верхнем левом углу, а не там, где вставляется или предыдущее местоположение.

Я знаю, что здесь что-то упущено.Я пытался изменить место прикрепления сортируемого метода, но он ничего не меняет.Буду признателен за любую помощь!

Часть визуализированного HTML: 

<div id="widgets" class="span9">
  <div class="widget span8">
    <div class="widget-head">
      <h4>Demo Activity 1</h4>
    </div>
    <div class="widget-content">
      <p>The content...</p>
    </div>
    <div class="widget-bottom"></div>
  </div>

  <div class="widget span4">
    <div class="widget-head">
      <h4>Demo Activity 2</h4>
    </div>
    <div class="widget-content">
      <p>The content...</p>
    </div>
    <div class="widget-bottom"></div>
  </div>

  <div class="widget span4">
    <div class="widget-head">
      <h4>Demo Activity 3</h4>
    </div>
    <div class="widget-content">
      <p>The content...</p>
    </div>
    <div class="widget-bottom"></div>
  </div>

</div>

Базовый заполнитель CSS, так что я действительно могу его увидеть: 

.widget-placeholder {
  border: 2px dashed #333;
}

КлипJS, который устанавливает сортируемое: 

    $sortableItems = $('> div', '#widgets');

    $sortableItems.find('.widget-head').css({
        cursor: 'move'
    }).mousedown(function (e) {
        $sortableItems.css({width:''});
        $(this).parent().css({
            width: $(this).parent().width() + 'px'
        });
    }).mouseup(function () {
        if(!$(this).parent().hasClass('dragging')) {
            $(this).parent().css({width:''});
        } else {
            $('#widgets').sortable('disable');
        }
    });

    $('.widget').sortable({
        items: $sortableItems,
        connectWith: $('#widgets'),
        handle: '.widget-head',
        containment: $('#widgets'),
        revert: 300,
        delay: 100,
        opacity: 0.8,
        placeholder: 'widget-placeholder',
        containment: 'document',
        forcePlaceholderSize: true,
        start: function (e,ui) {
            $(ui.helper).addClass('dragging');
        },
        stop: function (e,ui) {
            $(ui.item).css({width:''}).removeClass('dragging');
            $('#widgets').sortable('enable');
        }
    });

1 Ответ

0 голосов
/ 03 июля 2012

Добавьте float: left; к вашему классу заполнителя, и он будет размещен в правильном порядке в вашей сортируемой колонке. 

.widget-placeholder {
    border: 2px dashed #333;
    float: left;
}
...