Orderable inlines using drag and drop with jQuery UI

Author:: simon
Posted:: September 13, 2008
Language:: Python
Version:: 1.0
Score:: 29 (after 29 ratings)

Download
Raw

An easy way of making inlines orderable using drag-and-drop, using jQuery UI's sortable() plugin.

First, add an "order" field to the inline models which is an IntegerField, and set that model to use 'order' as its default order_by.

Then hook in the JavaScript. This should make them drag-and-drop sortable using jQuery UI, and also hide the divs containing those order fields once the page has loaded. This technique is unobtrusive: if JavaScript is disabled, the order fields will be visible and the user will be able to manually set the order by entering numbers themselves.

# models.py

from django.db import models

class Menu(models.Model):
    name = models.CharField(max_length = 100)
    
    def __unicode__(self):
        return self.name

class Item(models.Model):
    menu = models.ForeignKey(Menu)
    name = models.CharField(max_length = 100)
    url = models.CharField(max_length = 100)
    order = models.IntegerField(blank = True, null = True)
    
    def __unicode__(self):
        return self.name
    
    class Meta:
        ordering = ('order',)

# admin.py

from django.contrib import admin
from django import forms

from models import Menu, Item

class MenuForm(forms.ModelForm):
    model = Menu
    class Media:
        js = (
            '/static/js/jquery-latest.js',
            '/static/js/ui.base.js',
            '/static/js/ui.sortable.js',
            '/static/js/menu-sort.js',
        )

class ItemInline(admin.StackedInline):
    model = Item

admin.site.register(Menu,
    inlines = [ItemInline],
    form = MenuForm,
)

"""
/* menu-sort.js */

jQuery(function($) {
    $('div.inline-group').sortable({
        /*containment: 'parent',
        zindex: 10, */
        items: 'div.inline-related',
        handle: 'h3:first',
        update: function() {
            $(this).find('div.inline-related').each(function(i) {
                if ($(this).find('input[id$=name]').val()) {
                    $(this).find('input[id$=order]').val(i+1);
                }
            });
        }
    });
    $('div.inline-related h3').css('cursor', 'move');
    $('div.inline-related').find('input[id$=order]').parent('div').hide();
});
"""

Comments

richardh (on September 13, 2008):

Great presentation at PyCon UK 2008 this morning Simon. I have been wondering how do this for a year!

exogen (on September 14, 2008):

Nice! Just a note for anyone who was confused like I was - the JavaScript only works on StackedInlines, not TabularInlines.

patrickk (on October 23, 2008):

ordering is lost if there´s an error somewhere in the form.

trey (on December 19, 2008):

If you change line 63 (menu-sort.js) to

$(this).find('div.inline-related').not('div.inline-related:last').each(function(i) {

and then remove the if statement, It's a little less brittle in terms of field names (as it is here it requires a name field in the inline model.

andybak (on January 5, 2009):

This should work for TabularInlines. You might want to tweak my choice of handle and you'll have to change the eq(5) in the last line depending where in the field list you have placed 'order':

jQuery(function($) {
    $('.module table').sortable({
        items: 'tr',
        handle: 'td.title',
        update: function() {
            $(this).find('tr').each(function(i) {
                if ($(this).find('input[class$=vTextField]').val()) {
                    $(this).find('input[id$=order]').val(i+1);
                }
            });
        }
    });
    $('.module td.title').css('cursor', 'move');
    $('.module table').find('input[id$=order]').parent('td').hide();
    $('.module table thead th:eq(5)').hide();
});

leplatrem (on June 26, 2009):

At first, it looked pretty easy. But, I realized the menu-sort.js was made for an older version of Django.

With django1.02, inline items in the automatic admin look like:

<div class="inline-group">
<h2>Items</h2>
<div class="inline-related">
  <h3><b>Item:</b>Coffee</h3>
  <fieldset class="module aligned">
  <div class="form-row name">...</div>
  <div class="form-row order">...</div>
</div>
</div>

Does anyone already worked on updating menu-sort.js ?

Thank you all

southern_sun (on June 26, 2009):

The following script works with TabularInline in latest django release:

    jQuery(function($) {
        $('div.inline-group').sortable({
            items: 'tr.has_original',
            handle: 'td',
            update: function() {
                $(this).find('tr.has_original').each(function(i) {
                    $(this).find('input[name$=order]').val(i+1);
                    $(this).removeClass('row1').removeClass('row2');
                    $(this).addClass('row'+((i%2)+1));
                });
            }
        });
        $('tr.has_original').css('cursor', 'move');
    });

leplatrem (on June 26, 2009):

I managed to adapt it. Your critics about this piece of javascript are warmly welcomed!

$(function() {
    $("div.inline-group").sortable({ 
        //axis: 'y',
        placeholder: 'ui-state-highlight', 
        forcePlaceholderSize: 'true', 
        items: 'div.inline-related', 
        update: function() {
            $(this).find('div.inline-related').each(function(i) {
                if ($(this).find('.vTextField').val()) {
                    $(this).find('input[id$=order]').val(i+1);
                }
        });
        }
    });
    $("div.inline-group").disableSelection();

});

jQuery(document).ready(function($){
    $(this).find('input[id$=order]').parent('div').parent('div').hide()
});

vedran (on July 16, 2009):

hi! my item model has two ForeignKey fields and ordering is working but when i save the form it rearanges as in initial situation, as no ordering was made after making a few entries. does someone has a hint?

here is my 'Item' class from model.py

class PhotoSetPhotoItem(models.Model): #mid = models.AutoField(primary_key=True) order = models.IntegerField(blank = True, null = True) photo_set = models.ForeignKey('PhotoSet', related_name='photoset') photo_item = models.ForeignKey('Photo', related_name='photoitem') class Meta: #db_table='photoset_photoitems' ordering = ['order']

def __unicode__(self):
    return str(self.order)+str(self.mid)

vedran (on July 16, 2009):

cant make markdown working...

dfolland (on October 13, 2009):

for vedran: "name" and "order" are 2 required fields in the original code. Use leplatrem's code (June 26) which only requires "order"

balexand (on December 30, 2009):

The script above doesn't set the order fields properly if the fields are moved before the name has been entered. It's easier to just update the order fields before the form submits like this:

/* menu-sort.js */

jQuery(function($) {
    $('div.inline-group').sortable({
        /*containment: 'parent',
        zindex: 10, */
        items: 'div.inline-related',
        handle: 'h3:first'
    });
    $('div.inline-related h3').css('cursor', 'move');
    $('div.inline-related').find('input[id$=order]').parent('div').hide();
    $('#menu_form').submit(function() {
        $('div.inline-group > div.inline-related').each(function(i) {
            if ($(this).find('input[id$=name]').val()) {
                $(this).find('input[id$=order]').val(i+1);
            }
        });
    });
});

ugurozyilmazel (on February 26, 2010):

thanx a lot!

eddified (on April 9, 2010):

I used leplatrem's June 26 comment but I had to change the first line to this:

jQuery(function($) {

because something else in the page called jquery.noConflict() and it was messing up use of the dollar sign.

I also had to change vTextField to vIntegerField -- not sure why I had to do this, maybe it has to do with my django version, which is 1.2.0 beta 1

And then I also changed this:

$(this).find('input[id$=parent_order]').parent('div').parent('div').hide();

to this:

$(this).find('input[id$=parent_order]').parent('div').parent('div').hide().parent().parent().css('cursor','move');

Which helps the user know that the items are orderable (otherwise there is no indication in the U.I. that the items are orderable).

Here is my final code:

jQuery(function($) {
    $("div.inline-group").sortable({ 
        //axis: 'y',
        placeholder: 'ui-state-highlight', 
        forcePlaceholderSize: 'true', 
        items: 'div.inline-related', 
        update: function() {
            $(this).find('div.inline-related').each(function(i) {
                if ($(this).find('.vIntegerField').val()) {
                    $(this).find('input[id$=parent_order]').val(i+1);
                }
        });
        }
    });
    $("div.inline-group").disableSelection();

});

jQuery(document).ready(function($){
    $(this).find('input[id$=parent_order]').parent('div').parent('div').hide().parent().parent().css('cursor','move');
});

eddified (on April 9, 2010):

replace ALL occurrences of "parent_order" with just "order" in my previous post.

metamemetics (on May 19, 2010):

A quick hack of eddified's post to work with Django 1.2 and update the order field with dynamic inline creation:

jQuery(function($) {
    $("div.inline-group").sortable({ 
        axis: 'y',
        placeholder: 'ui-state-highlight', 
        forcePlaceholderSize: 'true', 
        items: '.row1, .row2', 
        update: update
    });
    $("div.inline-group").disableSelection();
});
function update() {
    $('.row1, .row2').each(function(i) {
        $(this).find('input[id$=order]').val(i+1);
    });
}
jQuery(document).ready(function($){
    $(this).find('input[id$=order]').parent('div').parent('div').hide().parent().parent().css('cursor','move');
    $('.add-row a').click(update);
});

payala (on August 24, 2010):

I had to modify the following in order to hide the order field in Django 1.2.1.

I changed the line:

$(this).find('input[id$=order]').parent('div').parent('div').hide().parent().parent().css('cursor','move');

to:

$(this).find('input[id$=order]').parent('td').hide().parent('tr').parent('tbody').parent('table').find("th:contains('Order')").hide(); $(this).find('input[id$=order]').parent('td').hide().parent('tr').parent('tbody').parent('table').css('cursor','move');

Please login first before commenting.

Orderable inlines using drag and drop with jQuery UI

More like this

Comments