djangoで画像のドラッグアンドドロップの実装1 -Javascript(jQuery)でUI作成-

djangoのプロフィール画像設定で、ドラッグアンドドロップを用いたプロフィール画像の編集ができるコードを紹介します。最終的には画像をドラッグアンドドロップしてサーバー側(djangoのviews)でsaveまでを行うつもりですが、一度に紹介するのは冗長になりますので最初のUIを作成する部分までを紹介します。

完成イメージ

想定しているのはプロフィール画像を変更する際に、ドラッグアンドドロップで選択した画像を指定の位置までドラッグするまでになります。

そして、ドラッグアンドドロップによる動的な要素としては選択範囲内に画像をドラッグさせた際は、ドットラインが線上ラインに変わるような動作をします。

(ちなみに以前紹介した下記機能に追加実装を想定しております。)

こんな人向け

以下の人向けに記事を書いています。

・javascript(jQuery)でドラッグアンドドロップを実装したい

・djangoでドラッグアンドドロップでサーバーに画像を保存したい

環境

環境は以下になります。ちなみにヒロヤンの場合はpipenvでの環境開発を行っています。

環境

・OS Mac

・python 3.8

・djano 2.2

・jQuery 3.5.1

実際のコード

それでは早速紹介をしていきます。

HTML

まずは目指すべきゴールは以下のUIです。

sample.html

今回はドラッグアンドドロップがメイン箇所なので、djangoのテンプレートタグは書いてはいますが説明は割愛しています。

CSS

sample.htmlに対するcssを作成していきます。

sample.css

JS

動的な動きをjavascript(jQuery)を用いて作成します。

sample.js

いかがでしたでしょうか。

前半部分の説明を終わりました。

続きはこちらからお願いします↓↓



スクールを利用して本格的に学ぶ

いかがでしたでしょうか?

10人中9人が挫折すると言われるプログラミングを、ヒロヤンも実はプログラミングスクールで学習をしてきたからで、結果、今はPythonエンジニアとして働いています。

挫折率が高いプログラミングこそお金を払ってメンターを付けて、道を見失わないように環境を構築する必要があるのではないでしょうか。

これはダイエットで自分一人では痩せられないけど、トレーナーを付けて否が応でもせざるを得ない環境を作ると一緒ですね。

ヒロヤンもプログラミング勉強開始直後はあれこれ悩みましたが、悩むよりも手っ取り早くスクールに登録した方が最短ルートで勉強できるのではないかと考え、結果挫折せずに今に至っています。

今なら無料でキャリアカウンセリングを行っているCodeCamp(コードキャンプ)のようなプログラミングスクールもありますのでこれを機会に是非カウンセリングだけでも受けてみてはいかがでしょうか?

CodeCampで無料のカウンセリング

上記リンク先から無料相談ができます。

またこちら(↓)ではPython専用のプログラミングスクールをまとめ紹介しています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です