Смените два элемента <li>

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

На рисунке показаны divs перед нажатием (они не пустые, я просто удалил содержимое для этой цели), как он изменяется после нажатия на div с индексом li 1 и как я хотел бы поменять li на индексы 1 и 2.

Я нашел некоторые решения, но ничего не сработало для меня. Я закончил с:

function swap(n) {
    var l = n.ancestor("li.msg-box-wrapper");
    var m = n.ancestor("#doubleColumnList").all("li.msg-box-wrapper");        
    var k = m.indexOf(n.ancestor("li.msg-box-wrapper")); 
    if ((k%2 != 0)) {
        $(l).before( $(l).next() );
    }
}

ОТВЕТЫ

Ответ 1

Трюк, чтобы заставить это работать, понимает, что новое положение активного элемента должно быть "первым в строке" от текущей позиции.

Чтобы найти элемент, который является первым в строке, просто найдите элемент, который:

  • первый ребенок или
  • имеет смещение по левому краю меньше, чем предыдущий родственный (по крайней мере, в ltr-контексте). (candidate.offset().left < candidate.prev().offset().left)

Итак, будет работать следующее:

  • при активации (щелкните) обратите внимание на текущую позицию и

    • найдите следующий элемент, который является первым в строке (включая элемент с щелчком).
    • замените эти два элемента

  • при деактивации просто перемещайте каждый активный элемент обратно в исходное положение.

Для простоты использования я переписал свой оригинальный ответ как плагин jquery. Поскольку я не мог найти доброе имя, оно в настоящее время называется foobar.

Использование

// '.wrapper' is the element containing the *toggle-able* elements.
$('.wrapper').foobar({
  // the element-selector
  elements: 'li',

  // the toggle-selector (if a *deeper* element should be used to toggle state)
  triggerOn: '.toggle',

  // indicates an active element
  activeClass: 'active',

  // get called on activation [optional]
  onActivate: function ($el) {
    console.log('activating', $el);
  },

  // get called on de-activation [optional]
  onDeactivate: function ($el) {
    console.log('de-activating', $el);
  }
});

плагин:

(function ($, pluginName) {
  'use strict';

  /**
   * Plugin behavior
   */
  $.fn[pluginName] = function (options) {
    var settings = $.extend(true, {}, $.fn[pluginName].defaults, options);

    // triggerOn-selector is required
    if (null === settings.triggerOn) {
      throw 'the `triggerOn` must be set.';
    }

    // without an element-selector
    if (null === settings.elements) {
      // use triggerOn-selector as default
      settings.elements = settings.triggerOn;
    }

    // apply behavior to each element in the selection
    return this.each(function() {
        var
          $wrapper = $(this),
          $elements = $wrapper.find(settings.elements)
        ;

        $wrapper.on(settings.event, settings.triggerOn, function () {
          var
            $el = $(this).closest(options.elements),
            isActive = $el.hasClass(settings.activeClass)
          ;

          reset($elements, settings.activeClass, settings.onDeactivate);

          if (!isActive) {
            activate($el, $elements, settings.activeClass, settings.onActivate);
          }
        });
    });
  };

  /**
   * Plugin defaults
   */
  $.fn[pluginName].defaults = {
    // required
    triggerOn: null,

    // defaults
    elements: null,
    event: 'click',
    activeClass: 'active',
    onActivate: function () {},
    onDeactivate: function () {}
  };

  /**
   * Reset all currently active elements
   *
   * @param {jQuery}   $elements
   * @param {String}   activeIndicator
   * @param {Function} onDeactivate
   */
  function reset($elements, activeIndicator, onDeactivate)
  {
    $elements
      .filter(function () {
        return $(this).hasClass(activeIndicator);
      })
      .each(function () {
        deactivate($(this), $elements, activeIndicator, onDeactivate);
      })
    ;
  }

  /**
   * Deactivate the given element by moving it back to it original position and removing the active-indicator.
   *
   * @param {jQuery}   $el
   * @param {jQuery}   $elements
   * @param {String}   activeIndicator
   * @param {Function} onDeactivate
   */
  function deactivate($el, $elements, activeIndicator, onDeactivate)
  {
    var originalIndex = $el.index();

    $el.removeClass(activeIndicator).insertBefore(
      $elements.eq(originalIndex)
    );

    onDeactivate($el);
  }

  /**
   * Activate the given element by moving it to a suitable position while applying the required indicator.
   *
   * @param {jQuery}   $el
   * @param {jQuery}   $elements
   * @param {String}   activeIndicator
   * @param {Function} onActivate
   */
  function activate($el, $elements, activeIndicator, onActivate)
  {
    $el
      .insertAfter(
        $elements.eq(findSuitablePosition($elements, $el.index()))
      )
      .addClass(activeIndicator)
    ;

    onActivate($el);
  }

  /**
   * @param {jQuery} $elements
   * @param {Number} originalIndex
   */
  function findSuitablePosition($elements, originalIndex)
  {
    // short-circuit simple case
    if (0 === originalIndex) {
      return originalIndex;
    }

    var
      candidateIndex = originalIndex,
      lim = $elements.length,
      $candidate
    ;

    for (; candidateIndex < lim; candidateIndex += 1) {
      $candidate = $elements.eq(candidateIndex);

      if ($candidate.offset().left < $candidate.prev().offset().left) {
        return candidateIndex;
      }
    }

    throw 'could not find a suitable position.';
  }
})(jQuery, 'foobar');

Демо: http://plnkr.co/edit/8ARXgq2pLSzm9aqHI8HL?p=preview

оригинальный ответ:

Следующие действия будут работать, если вы хотите использовать jQuery.

Это немного сложнее, чем нужно, но таким образом он работает и для более чем двух столбцов. Обратите внимание на стиль кода, чтобы его можно было легко выполнить.

$('.wrapper').each(function () {
  var $wrapper = $(this);

  $wrapper.on('click', 'li', function () {
    var
      $el = $(this),
      isOpen = $el.is('.open')
    ;

    reset();

    if (!isOpen) {
      open($el);
    }
  });

  function open($el)
  {
    var originalIndex = $el.index();

    // note index and move to suitable position
    $el
      .data('original-index', originalIndex)
      .insertAfter(
        $wrapper.find('li').eq(findSuitablePosition(originalIndex))
      )
      .addClass('open')
    ;
  }

  function reset()
  {
    $wrapper.find('.open').each(function () {
      var
        $el = $(this),
        originalIndex = $el.data('original-index')
      ;

      $el.removeClass('open').insertBefore(
        $wrapper.find('li').eq(originalIndex)
      );
    });
  }

  function findSuitablePosition(originalIndex)
  {
    // short-circuit simple case
    if (0 === originalIndex) {
      return originalIndex;
    }

    var
      $candidates = $wrapper.find('li'),
      candidateIndex = originalIndex,
      lim = $candidates.length,
      candidate
    ;

    for (; candidateIndex < lim; candidateIndex += 1) {
      candidate = $candidates.eq(candidateIndex);

      if (candidate.offset().left < candidate.prev().offset().left) {
        return candidateIndex;
      }
    }

    throw 'could not find a suitable position.';
  }
});
ul {
  list-style: none;
  margin: 0;
  padding: 5px 10px;
  width: 300px;
  border: 1px solid #ccc;
  overflow: hidden;
  font-family: sans-serif;
  margin-bottom: 5px;
}

li {
  float: left;
  margin: 10px 5px;
  padding: 3px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

ul li.open {
  width: calc(100% - 10px);
  height: 40px;
  border-color: green;
}

.two li {
  width: calc(50% - 10px);
}

.three li {
  width: calc(33% - 10px);
}

.four li {
  width: calc(25% - 10px);
}
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<ul class="wrapper two">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

<ul class="wrapper three">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

<ul class="wrapper four">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

Ответ 2

Если вам нужен ответ, который не использует jQuery, это одно из таких решений:

var list = document.getElementById('list');
var listItems = list.children;

function select(e) {
  // Remove the selected class from the previously selected list item
  var selectedEl = document.querySelector('.selected');
  if (selectedEl) {
    selectedEl.classList.remove('selected');
  }

  // Add the selected class to the current list item
  var targetEl = e.target;
  targetEl.classList.add('selected');

  // Find the current li position in the node list
  var targetPosition = Array.prototype.indexOf.call(listItems, targetEl);

  // If it is in an odd position, and there is a sibling after it
  // move that sibling before it
  if (targetPosition % 2 > 0 && targetEl.nextElementSibling) {
    list.insertBefore(targetEl.nextElementSibling, targetEl);
  }
}

// Add click listeners
for(var i = 0, len = listItems.length; i < len; i++) {
  listItems[i].addEventListener('click', select);
}
ul {
  position: relative;
  width: 400px;
}

li {
  text-align: center;
  float: left;
  display: block;
  height: 20px;
  width: 190px;
  margin: 5px;
  background: red;
}

.selected {
  width: 390px;
}
<ul id="list">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Ответ 3

Вы можете легко сделать это с помощью jquery.

Я сделал вам JSFiddle здесь

Идея состоит в том, чтобы определить классы, один для малых прямоугольников и для большого прямоугольника. Затем нажмите один из маленьких, установите все на мелкие и нажмите на большой. Затем, если необходимо, измените порядок списка.

HTML

<ul class="container">
 <li class="small item">1</div>
 <li class="small item">2</div>
 <li class="small item">3</div>
 <li class="small item">4</div>
 <li class="small item">5</div>
 <li class="small item">6</div>
</ul>

CSS

.container{
width: 130px;
list-style-type: none;
}
.small{
margin: 5px;
width: 50px;
height: 20px;
background-color: red;
float: left;
}
.big{
margin: 5px;
width: 110px;
height: 60px;
background-color: red;
float: left;
}

Jquery:

$(function(){

//ON LI CLICKED
$(".small").click(function() {

    //LI REMOVE BIG ONE
    $( ".item" ).removeClass( "big" ).addClass( "small" );

    //ADD BIG CLASS
    $(this).removeClass( "small" ).addClass( "big" );

    //IF NECESSARY THAN REORDER
    if($( "li" ).index( $(this) )%2==1){
        alert("reorder");
        //CHANGE INDEX OF LI
        $(this).siblings().eq(1).after(this);
    }
});

});

Ответ 4

вы можете проверить, находится ли элемент с щелчком в нечетном положении, а затем вставить следующий элемент перед ним. проверьте его -

$('.box').on('click', function() {
    if($(this).index()%2 != 0) {
        $(this).next().insertBefore($(this));
    }
    $('.box').removeClass('fullwidth');
    $(this).addClass('fullwidth');
});

Рабочая демонстрация

UPDATE: Добавлена ​​функция sorter() для сортировки всех div в исходных местах.

$('.box').each(function(i) {
    $(this).attr('i', i);
});
function sorter() {
    for(var x=0; x<$('.box').length; x++) {
        $('.box').each(function() {
            if($(this).attr('i') > $(this).next().attr('i')) {
                $(this).insertAfter($(this).next());
            }
        });
    }
}

вызовите его при каждом нажатии .box.

ОБНОВЛЕНО FIDDLE