質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

3874閲覧

django、JQuery、ドラッグアンドドロップで並び替えができるようにしたい

hiranohirano

総合スコア33

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/01/28 06:56

前提・実現したいこと

以下のページのように、ドラッグ&ドロップで並べ替えをできるようにしたいです。
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); のところを変更して、モデルのデータを書き換えられるのかなど、
見当がつかなくなってきたので、質問しました。

お分かりになる方、何卒宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ブラウザ上で並び替え自体はできるのですが、更新すると、元に戻ってしまいます。

プラグインはその場で並べ替えを行っているだけで状態は保存しません。
sortを行ったときにどこかしらに並べ替えた情報を保持しておいてそこを参照する必要があります。

その「どこかしら」をどこにするかは決めてもらう必要があります。

orderを入れるにしても順番を保持しておくフィールドをテーブルに持たなければなりませんし、
フロントエンドであればWebStorageという仕組みがありますが、「どのタイミングで並べ替えるか」によってはデータの取得方法を変える必要があるように思います。

投稿2019/01/28 07:02

編集2019/01/28 07:03
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/01/28 07:09

回答には記載していませんが、「Pythonでの実現方法」ではなく、「一般的なWebにおける考え方」の回答です。私自身がPythonに明るいわけではないので、あくまでヒントとして捉えてください。
hiranohirano

2019/01/28 08:56

ご回答いただき、誠にありがとうございます。ヒントをもとに試行錯誤してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問