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

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

コンテンツ

完成イメージ

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

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

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

django画像アップロード機能を実装する方法

こんな人向け

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

・javascript(jQuery)でドラッグアンドドロップを実装したい
・djangoでドラッグアンドドロップでサーバーに画像を保存したい

環境

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

環境

・OS Mac

・python 3.8

・djano 2.2

・jQuery 3.5.1

実際のコード

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

HTML

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

sample.html

<body>
<h1>プロフィール画像のアップロード</h1>

<table class="edit-profile-table">
    <tr>
        <td>
            <img src="{{ MEDIA_URL }}{{ avator }}" alt="" class="avator">
        </td>
    </tr>
    <tr>
        <td>
            <div id="dragandrophandler">ここにプロフィール写真をドラッグ</div>
            <div id="preview"></div>
            <form action="" method="post" enctype="multipart/form-data"></form>
            {# csrf_token #}
            <div>{{ form.avator }}{{ form.avator.errors }}</div>
            <button type="submit" class="btn">登録</button>
            </form>
        </td>
    </tr>
</table>

<script src="{% static 'sample/js/sample.js' %}"></script>
</body>

<body>

<h1>プロフィール画像のアップロード</h1>

<tr>

<td>

</td>

</tr>

<tr>

<td>

<div id="dragandrophandler">ここにプロフィール写真をドラッグ</div>

{# csrf_token #}

<div>{{ form.avator }}{{ form.avator.errors }}</div>

</form>

</td>

</tr>

</table>

</body>

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

CSS

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

sample.css

.edit-profile-table{
    box-sizing: border-box;
    border: 1px solid rgba(241, 70, 233, 0.377);
    border-radius: 5px;
    text-align: center;
    margin: 0 auto;
}

.edit-profile-table tr td .avator{
    margin: 15px;
    border-radius: 50%;
    border: 3px solid #f1a2e7;
}

#dragandrophandler{
    border: 2px dotted #0B85A1;
    height: 100px;
    color: #92AAB0;
    text-align: left;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 2em;
}

.edit-profile-table tr td div,
.edit-profile-table tr td button{
    margin: 13px;
}

.edit-profile-table{

box-sizing: border-box;

border: 1px solid rgba(241, 70, 233, 0.377);

border-radius: 5px;

text-align: center;

margin: 0 auto;

}

.edit-profile-table tr td .avator{

margin: 15px;

border-radius: 50%;

border: 3px solid #f1a2e7;

}

#dragandrophandler{

border: 2px dotted #0B85A1;

height: 100px;

color: #92AAB0;

text-align: left;

padding: 10px;

margin-bottom: 10px;

font-size: 2em;

}

.edit-profile-table tr td div,

.edit-profile-table tr td button{

margin: 13px;

}

JS

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

sample.js

'use strict';


// drag and drop event
$(document).ready(function() {
    var obj = $("#dragandrophandler");
    obj.on('dragenter', function (e) {
        e.stopPropagation();
        e.preventDefault();
        $(this).css('border', '2px solid #0B85A1');
    });
    obj.on('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
    });
    obj.on('drop', function(e) {
        $(this).css('border', '2px dotted #0B85A1');
        e.preventDefault();

        var files = e.originalEvent.dataTransfer.files;
        
        // Modal dialog
        popupImage(file, obj);
    });

    // Avoid opening in a browser if the file is dropped outside the div
    $(document).on('dragenter', function (e) {
        e.stopPropagation();
        e.preventDefault();
    });

    $(document).on('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
        obj.css('border', '2px dotted #0B85A1');
    });

    $(document).on('drop', function (e) {
        e.stopPropagation();
        e.preventDefault();
    });
    
});

'use strict';

// drag and drop event

$(document).ready(function() {

var obj = $("#dragandrophandler");

obj.on('dragenter', function (e) {

e.stopPropagation();

e.preventDefault();

$(this).css('border', '2px solid #0B85A1');

});

obj.on('dragover', function (e) {

e.stopPropagation();

e.preventDefault();

});

obj.on('drop', function(e) {

$(this).css('border', '2px dotted #0B85A1');

e.preventDefault();

var files = e.originalEvent.dataTransfer.files;

// Modal dialog

popupImage(file, obj);

});

// Avoid opening in a browser if the file is dropped outside the div

$(document).on('dragenter', function (e) {

e.stopPropagation();

e.preventDefault();

});

$(document).on('dragover', function (e) {

e.stopPropagation();

e.preventDefault();

obj.css('border', '2px dotted #0B85A1');

});

$(document).on('drop', function (e) {

e.stopPropagation();

e.preventDefault();

});

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

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

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

djangoで画像のドラッグアンドドロップの実装2 -Javascript(jQuery)でモーダルダイアログの作成-

リンク

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

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

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

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

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

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

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

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

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

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

【厳選】Python学べるおすすめのプログラミングスクール

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

完成イメージ

こんな人向け

環境

実際のコード

HTML

CSS

JS

コメントを残すコメントをキャンセル

管理人

カテゴリー

アーカイブ

完成イメージ

こんな人向け

環境

実際のコード

HTML

CSS

JS

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

MySQLのインストールからPythonファイルで接続して保存するまでの…

Pythonを使ってかっこいい画像を作成してみる③

投稿タイトルを消す方法

【Python】importとfrom の違い

ブログ運営 1年と1ヶ月のコスト、PV、収益、SEO対策まとめ

Pythonを使ってCSVファイルのデータをMySQLに流し込む

クラウドワークスから自分の条件に合った案件をスクレイピングする①

【Python】pipenvのモジュールのダウングレード

管理人

カテゴリー

アーカイブ

コメントを残すコメントをキャンセル