javascript - JQuery Sortable Grid Functionality without Identical Dimensions - Stack Overflow

admin管理员组

文章数量:1287580

I am looking to create a sortable (via drag and drop) grid, similar to what JQuery's Sortable grid does ( ). 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.

I am looking to create a sortable (via drag and drop) grid, similar to what JQuery's Sortable grid does ( http://jqueryui./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.

• javascript
• jquery
• drag-and-drop

Share Improve this question Follow asked Jan 10, 2011 at 19:36 MatthiasMatthias 34511 gold badge33 silver badges1111 bronze badges 1

• 3 Did you ever find anything for this? I'm researching the same concept. – Alex King Commented Apr 7, 2011 at 20:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Jquery sortable does not require the items to be the same dimensions, as you can see in my prototype here: http://brettlyman/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.

The short answer:

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

General ments:

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 pletely different after each movement.

Working on the similar feature I developed jQuery plugin "Swappable" http://www.eslinstructor/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

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;
      }
    }
  });

本文标签： javascriptJQuery Sortable Grid Functionality without Identical DimensionsStack Overflow