Login

Drag and drop admin list items

Author:
chrsgrrtt
Posted:
August 23, 2010
Language:
Python
Version:
Not specified
Score:
3 (after 3 ratings)

Using jQuery UI (with Grappelli in use) to add "drag and drop" reordering of items in the admin list view. The model must have an "order" field to store the order value in.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
# models.py
from django.db import models
from filebrowser.fields import FileBrowseField
from autoslug.fields import AutoSlugField
import datetime

class Project(models.Model):
	title = models.CharField(max_length = 200, blank = True)
	publish_date = models.DateField(default = datetime.date.today)
	client = models.CharField(max_length = 200, blank = True)
	slug = AutoSlugField(populate_from='title')
	thumbnail = FileBrowseField("Thumbnail", max_length=200, format='Image', blank = True)
	details = models.TextField(blank = True)
	featured = models.BooleanField()
	order = models.PositiveIntegerField(default = 1, blank = True)
	sector = models.ForeignKey(Sector)
	url = models.CharField(max_length = 200, blank = True)
	
	def get_absolute_url(self):
		return '/portfolio/project/%s' % self.slug
	
	def __unicode__(self):
		return self.title
		
	class Meta:
		ordering = ('order',)

# admin.py
from django.contrib import admin
from abstraktion.portfolio.models import *

class ProjectAdmin(admin.ModelAdmin):
	fieldsets = (
		('Summary', {
			'fields': ('title', 'client', 'publish_date')
		}),
		('Description', {
			'fields': ('details', 'sector')
		}),
		('Listing', {
			'fields': ('thumbnail', 'url', 'order', 'featured')
		})
	)
	
	list_display_links = ('title',)
	list_display = ('title', 'client', 'sector', 'publish_date', 'order')
	list_editable = ('order',)
	
	class Media:
		js = [
			'/media/tinymce/jscripts/tiny_mce/tiny_mce.js', 
			'/media/tinymce_setup/tinymce_setup.js',
			'/media/js/sortable_list.js'
		]

# sortable_list.js
(function($) {
	// Matching regex with jQuery
	$.expr[':'].regex = function(elem, index, match) {
	    var matchParams = match[3].split(','),
	        validLabels = /^(data|css):/,
	        attr = {
	            method: matchParams[0].match(validLabels) ? 
	                        matchParams[0].split(':')[0] : 'attr',
	            property: matchParams.shift().replace(validLabels,'')
	        },
	        regexFlags = 'ig',
	        regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
	    return regex.test($(elem)[attr.method](attr.property));
	}
	
	$(document).ready(function(){
		$('table tbody tr').css({ 'cursor': 'move' });
		
		$('table tbody').sortable({
			axis: 'y',
			update: function(){
				$('.footer').show();
				
				$.each($('table tbody tr'), function(i){
					$(this).find('input:regex(name, .*-order)').val(i + 1);
				});
				
				$(this).find('tr').removeClass('row1').removeClass('row2');
				
				$(this).find('tr:odd').addClass('row2');
				$(this).find('tr:even').addClass('row1');
			}
		});
	});
})(django.jQuery);

More like this

  1. Month / Year SelectDateWidget based on django SelectDateWidget by pierreben 3 months ago
  2. Python Django CRUD Example Tutorial by tuts_station 3 months, 2 weeks ago
  3. Browser-native date input field by kytta 5 months ago
  4. Generate and render HTML Table by LLyaudet 5 months, 1 week ago
  5. My firs Snippets by GutemaG 5 months, 2 weeks ago

Comments

andybak (on August 23, 2010):

How does this react when the changelist has a filter or search applied?

#

Please login first before commenting.