JQuery Sortable Grid Functionality without Identical Dimensions

问题

I am looking to create a sortable (via drag and drop) grid, similar to what JQuery's Sortable grid does ( http://jqueryui.com/demos/sortable/#display-grid ). However, Sortable requires that you use only divs with identical dimensions. For my purposes, each block is allowed to be different widths and heights.

The functionality I am looking for is the snap-to-grid capabilities while "shoving" the other elements out of the way. Draggable does everything except for preventing them from overlapping and shoving the other elements out of the way.

Oh, it doesn't have to be Jquery either. I'm open to using other methods if it is easier.

回答1:

Jquery sortable does not require the items to be the same dimensions, as you can see in my prototype here: http://brettlyman.net/dashboard/index3.html

Most people use <ul> as the sortable container and <li>'s as the sortable items, and they can contain any content you want. Just make sure you put "list-style-type: none; margin: 0; padding: 0;" in the style of the <ul> so it looks/behaves like a container.

Unfortunately with sortable you cannot do a free-form grid -- the items must be next to each other in proximity. In my prototype I float everything left, so they fill to the right and then drop to the next line. I have the grid option set on the resize of my containers, however, so I can enforce a grid-type layout.

Thought I'd post my solution in case anyone else is having the same type of problem.

回答2:

The short answer:

use "stop" event to re-calculate all grid elements according their new positions.

General comments:

sortable grid with variable element's dimensions - it is a visual mess, as elements of different size moving multiple times, jumping up and down, while you're dragging one of them; and layout completely different after each movement.

Working on the similar feature I developed jQuery plugin "Swappable" http://www.eslinstructor.net/demo/swappable/swappable_home.html

and recently I answered the same question regarding this plugin:

to Swap elemnts(with className too) when Draged & Dropped

please take a look at the discussion and maybe it help you.

best regards,

-Vadim

回答3:

I came across this question trying to solve the problem for myself.

I'm on my first iteration at trying a workaround: use the parent container as a droppable. Will let you know if it works:

For the following HTML:

<div id="sortable">
  <div><div class="handle"></div>1</div>
  <div><div class="handle"></div>2</div>
  <div><div class="handle"></div>3</div>
  ...
</div>

Using the following JavaScript:

$('#sortable')
  .sortable({
    handle: '.handle',
    tolerance: 'pointer'
  })
  .droppable({
    drop: function(e, ui) {
      var previousElement = ui.draggable.parent().children().filter(function() {
        var $this = $(this);
        var pos = $this.position();
        return (this != ui.draggable[0]) && (pos.left <= ui.position.left) && (pos.top <= ui.position.top);
      }).last();
      if( previousElement.length ) {
        previousElement.after(ui.draggable[0]);
        ui.draggable.parent().data().sortable._noFinalSort = true;
      }
    }
  });

来源：https://stackoverflow.com/questions/4650720/jquery-sortable-grid-functionality-without-identical-dimensions

标签

javascript

jquery

drag-and-drop