Menu icon Foundation
Is it possible to have a draggable grid?

Wondering if it's possible to drag grid rows into different orders on a page? For example, can the code below be rearranged by dragging the rows?

            

<div class="row-container">
    <div class="row parent">
        <div class="small-2 medium-2 large-2 columns">
            ROW 1
        </div>
    </div>
</div>

<div class="row-container">
    <div class="row parent">
        <div class="small-2 medium-2 large-2 columns">
            ROW 2
        </div>
    </div>
</div>
<div class="row-container">
    <div class="row parent">
        <div class="small-2 medium-2 large-2 columns">
            ROW 3
        </div>
    </div>
</div>

draggable row grid

Wondering if it's possible to drag grid rows into different orders on a page? For example, can the code below be rearranged by dragging the rows?

            

<div class="row-container">
    <div class="row parent">
        <div class="small-2 medium-2 large-2 columns">
            ROW 1
        </div>
    </div>
</div>

<div class="row-container">
    <div class="row parent">
        <div class="small-2 medium-2 large-2 columns">
            ROW 2
        </div>
    </div>
</div>
<div class="row-container">
    <div class="row parent">
        <div class="small-2 medium-2 large-2 columns">
            ROW 3
        </div>
    </div>
</div>
Brandon Arnold almost 4 years ago

What would you be using to make these draggable? Is this for a CMS or WYSIWYG editor?

Steve Valet almost 4 years ago

Hey Brandon,

It's for a workflow. Employee enters a time an order went out. Sometimes they forget and don't enter the order. So the ability to create a order (row), then drag it to the appropriate time in the stack of other orders (rows) is needed.

EXAMPLE: Each order is a foundation row
2:00 PM - Order 1
2:05 PM - Order 2
2:15 PM - Order 4
2:10 PM - Order 3

Ooops!! I forgot an order and created it, but now need to push between order 2 and 4.

I want to drag "Order 3" between 2 and 4.

Thanks
Steve

Brandon Arnold almost 4 years ago

Foundation rows won't prevent that from happening for any reason, so i'd just test it with whatever draggable item you're attempting to use.

Steve Valet almost 4 years ago

Thanks again. I guess what I'm also asking is if there are any examples of where this has been done? I've seen table and row examples, but not a Foundation grid.

Brandon Arnold almost 4 years ago

This is the best one i've used
http://bevacqua.github.io/dragula/

Also a great name.