jquery:画像ファイルのドラッグ&ドロップ&コピー

画像ファイルのドラッグ&ドロップのjqueryを使ったUI です。
*#R+#ローカル→サーバー ではなく #R+#サーバー→サーバー です。

###explain
こんなかんじのUIです。ドラッグアンドドロップで画像をコピーしたり、移動させたりする処理です。
###center
(img://21/255m)

###title
ソース
###source

$(".drag").draggable({

// helper:clone は画像をコピーするイメージの場合は必要
		helper: "clone",
		// ドラッグ開始時
		start : function (event , ui){
		} ,
		// ドラッグ中
		drag : function (event , ui) {
		} ,
		// ドラッグ終了時に呼ばれる
		stop : function (event , ui){
		}
	});

$(".drag").droppable({
		// ドラッグ開始時
		drop: function( event, ui ) {
			src = $(ui.draggable[0]).attr('src') ;
			dest = $(this).attr('src') ;
			// サーバーに処理を渡す。
			_copy(this, src, dest) ;
		} ,
		// ドラッグ終了時
		out: function( event, ui ) {
		}
	});
	
});

function _copy(obj, src, dest)
{
	// src  は コピー元画像 例) /img/31.jpg
	// dest は コピー先ファイル名 例) /img/33.jpg
	// ajax でサーバー側にファイルコピーの指示をだす。
	// プログラムは省略
}
</script>
###memo

html側の #*#class="drag" は jquery側の #*#$(".drag") と合わせます。要所だけ記載しておきます。* <ul class="ul_flex"> などのcssは適宜してください。
###source
(html)
<ul class="ul_flex">
<li >
<img src="/img/31.jpg" class="drag" width="90" height="90" />
</li>
<li>
<img src="/img/32.jpg" class="drag" width="90" height="90" />
</li>
<li>
<img src="/img/33.jpg" class="drag" width="90" height="90" />
</li>
</ul>
###memo
ついでに /img/33.jpg が存在しない場合は nophoto.png を表示するように .htaccess なども細工しておきます。

###source
(.htaccess)
ErrorDocument 404 /img/nophoto.png
###

###title
所感

###
WEB上でドラッグ&ドロップできると気持ちいいです。お客様にも評判がよかったです。ちなみに、Androidのスマホ・タブレットでも普通にできました。
###center
(img://21/256m)

###
アップロードのUIやサーバー側の処理は省略します。

###center
(img://21/258s)

###memo
今回は サーバー→サーバーですが、機会があれば ローカル→サーバー のドラッグ&ドロップも説明します。

wakatta 記法

このコンテンツを見る