将垂直可排序布局转换为水平布局

Question

我正在玩拖放可排序的布局。在谷歌的帮助下，我设法提出了我喜欢的垂直布局。你可以在这里看到它： JSFIDDLE。令我感到困惑的是如何将这个（垂直）布局转换为水平布局。

我尝试使用float:left，设置.parents和buttons宽度，但所有尝试都没有用。

将此转换为横向似乎高于我的专业知识。关于如何解决这个问题的任何想法？

$(function() {

  $("#clickme").click(function() {
    var elemnew = $("<button id='button1' class='button'>NEWLY ADDED</button>");
    elemnew.insertBefore("#button1");
    elemnew.height(elemnew.width());

  });


  $(".button").height($(".button").width());
  $(".parent").on('mousedown', '.button', function(e) {
    if (e.which === 1) {
      var button = $(this);
      var button_id = button.attr('id');
      var parent_height = button.parent().innerHeight();
      var top = parseInt(button.css('top'));
      var original_ypos = button.position().top; //original ypos
      var drag_min_ypos = 0 - original_ypos;
      var drag_max_ypos = parent_height - original_ypos - button.outerHeight();
      var drag_start_ypos = e.clientY;
      var my_ypos = original_ypos;
      //Set current order for all
      $('.button').each(function(i) {
        $(this).attr('data-order', (i + 1));
      });
      var prev_button = button.prev('.button');
      var next_button = button.next('.button');
      var prev_button_ypos = prev_button.length > 0 ? prev_button.position().top : '';
      var next_button_ypos = next_button.length > 0 ? next_button.position().top : '';
      $('#log1').text('mousedown ' + button_id + ' original_ypos: ' + original_ypos);
      $('#log2').text('');
      $('#log3').text('');
      $(window).on('mousemove', function(e) {
        //Move and constrain
        button.addClass('drag');
        var direction = my_ypos > button.position().top ? 'up' : 'down';
        var new_top = top + (e.clientY - drag_start_ypos);
        my_ypos = button.position().top;
        button.css({
          top: new_top + 'px'
        });
        if (new_top < drag_min_ypos) {
          button.css({
            top: drag_min_ypos + 'px'
          });
        }
        if (new_top > drag_max_ypos) {
          button.css({
            top: drag_max_ypos + 'px'
          });
        }
        $('#log2').text('mousemove new_top: ' + new_top + ', my_ypos: ' + my_ypos + ', direction: ' + direction);
        //$('#log3').text('');
        //Check position over others
        if (direction == 'down' && next_button_ypos != '') {
          if (my_ypos > next_button_ypos) { //crossed next button
            $('#log3').text('dragged after ' + next_button_ypos + ' (' + next_button.attr('id') + ')');
            next_button.css({
              top: (parseInt(next_button.css('top')) - next_button.outerHeight(true)) + 'px'
            }); //up once
            var tmp_order = next_button.attr('data-order');
            next_button.attr('data-order', button.attr('data-order')); //switch order
            button.attr('data-order', tmp_order);
            prev_button = next_button;
            next_button = next_button.nextAll('.button:not(.drag)').first();
            prev_button_ypos = prev_button.length > 0 ? prev_button.position().top : '';
            next_button_ypos = next_button.length > 0 ? next_button.position().top : '';
          }
        } else if (direction == 'up' && prev_button_ypos != '') {
          if (my_ypos < prev_button_ypos) { //crossed prev button
            $('#log3').text('dragged before ' + prev_button_ypos + ', ' + prev_button.attr('id'));
            prev_button.css({
              top: (parseInt(prev_button.css('top')) + prev_button.outerHeight(true)) + 'px'
            }); //down once
            var tmp_order = prev_button.attr('data-order');
            prev_button.attr('data-order', button.attr('data-order')); //switch order
            button.attr('data-order', tmp_order);
            next_button = prev_button;
            prev_button = prev_button.prevAll('.button:not(.drag)').first();
            prev_button_ypos = prev_button.length > 0 ? prev_button.position().top : '';
            next_button_ypos = next_button.length > 0 ? next_button.position().top : '';
          }
        }
        $('#log4').text('prev_button_ypos: ' + prev_button_ypos + ' (' + prev_button.attr('id') + '), next_button_ypos: ' + next_button_ypos + ' (' + next_button.attr('id') + ')');
      });
      $(window).on('mouseup', function(e) {
        if (e.which === 1) {
          $('.button').removeClass('drag');
          $(window).off('mouseup mousemove');
          //Reorder and reposition all
          $('.button').each(function() {
            var this_order = parseInt($(this).attr('data-order'));
            var prev_order = $(this).siblings('.button[data-order="' + (this_order - 1) + '"]');
            if (prev_order.length > 0) {
              $(this).insertAfter(prev_order);
            }
          });
          $('.button').css('top', '0');
          $('.button').removeAttr('data-order'); //reset
          $('#log1').text('mouseup');
          $('#log2').text('');
          $('#log3').text('');
          $('#log4').text('');
        }
      });
    }
  });
});

.parent {
  position: relative;
  display: block;
  padding: 20px 5px 20px 5px;
  margin: 20px;
  width: 150px;
  border: 1px solid black;
  overflow: auto;
  height: 300px;
}

.button {
  position: relative;
  top: 0;
  display: table;
  margin-bottom: 2px;
  width: 80%;
  height: 80px;
  clear: both;
  margin: 2px auto;
}

.button:hover {
  cursor: pointer;
}

.button.drag {
  z-index: 99;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="parent" class="parent">
  <button id="button1" class="button">Drag me 1</button>
  <button id="button2" class="button">Drag me 2</button>
  <button id="button3" class="button">Drag me 3</button>
  <button id="button3" class="button">Drag me 3</button>
  <button id="button3" class="button">Drag me 3</button>

</div>
<div id="log1"></div>
<div id="log2"></div>
<div id="log3"></div>
<div id="log4"></div>
<button id="clickme">
  CLICK ME FOR MORE
</button>