前提・実現したいこと
以下のページのように、ドラッグ&ドロップで並べ替えをできるようにしたいです。
jQueryで簡単にドラッグ&ドロップのソートを実装する方法
発生している問題・エラーメッセージ
ブラウザ上で並び替え自体はできるのですが、更新すると、元に戻ってしまいます。
該当のソースコード
models.py
python
1class Store(models.Model): 2 name = models.CharField(verbose_name='店舗名', max_length=255) 3 menu_1 = models.CharField(verbose_name='メニュー1', max_length=255 , blank=True) 4 menu_price_1 = models.IntegerField(verbose_name='メニュー料金1', default=0) 5 menu_2 = models.CharField(verbose_name='メニュー2', max_length=255 , blank=True) 6 menu_price_2 = models.IntegerField(verbose_name='メニュー料金2', default=0) 7 menu_3 = models.CharField(verbose_name='メニュー3', max_length=255 , blank=True) 8 menu_price_3 = models.IntegerField(verbose_name='メニュー料金3', default=0)
forms.py
class StoreUpdateForm(forms.ModelForm): class Meta: model = Store fields = ('__all__')
views.py
class StoreUpdateView(UpdateView): model = Store form_class = StoreUpdateForm template_name = 'app/store_update.html' def get_success_url(self): return resolve_url('app:index')
store_update.html
html
1<table class="table table-striped table-bordered"> 2 <thead> 3 <tr> 4 <th>メニュー</th> 5 <th>料金</th> 6 </tr> 7 </thead> 8 <tbody id="sortable"> 9 <tr> 10 <td class="rank">1</td> 11 <th>{{ form.menu_1 }}</th> 12 <td>{{ form.menu_price_1 }}</td> 13 </tr> 14 <tr> 15 <td class="rank">2</td> 16 <th>{{ form.menu_2 }}</th> 17 <td>{{ form.menu_price_2 }}</td> 18 </tr> 19 <tr> 20 <td class="rank">3</td> 21 <th>{{ form.menu_3 }}</th> 22 <td>{{ form.menu_price_3 }}</td> 23 </tr> 24 </tbody> 25</table>
main.js
$('#sortable').sortable(); $('#sortable').disableSelection(); $('#sortable').bind('sortstop', function (e, ui) { var rows = $('#sortable .rank'); for (var i = 0, rowTotal = rows.length; i < rowTotal; i += 1) { $($('.rank')[i]).text(i + 1); } })
models.pyのところで、orderのようなフィールドを作ったほうが良いのか、
それとも、$($('.rank')[i]).text(i + 1); のところを変更して、モデルのデータを書き換えられるのかなど、
見当がつかなくなってきたので、質問しました。
お分かりになる方、何卒宜しくお願い致します。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/28 07:09
2019/01/28 08:56