Drag and drop admin list items

 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. Drag and drop ordering of admin list elements for Grappelli by sjaensch 2 years, 4 months ago
  2. Drag and drop ordering of admin list elements using jQuery UI by johj 2 years, 11 months ago
  3. Orderable inlines using drag and drop with jQuery UI by simon 4 years, 8 months ago
  4. Drag and drop ordering of admin list elements for Grappelli [v2] by brejoc 4 months, 2 weeks ago
  5. Ajax ordering models on the change list page of the admin using drag and drop with jQuery UI by spoof 2 years, 11 months ago

Comments

andybak (on August 23, 2010):

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

#

(Forgotten your password?)