日別アーカイブ: 2019年3月2日

HTML,PHP,JavaScript

マウスドラッグによる要素並び替え検討②

コメントする
ウィンドウ幅による配置変更

先回に引き続き要素の並び替えについて検討します。ページ読み込みや開いているブラウザーのリサイズ時に左上からＩＤ番号順になる様に、下の図の通り対象要素の配置変更をします。
jQuery UI “Sortable” の並び替えとは少し違いますが、要素を意図した位置に配置する為に思考上のステップとして必要とご理解下さい。
（→テストプログラムへのリンク）

【図１：ウィンドウサイズ変更による要素再配置】
【図２：マウスドラッグによる要素移動】

プログラムメモ

テストプログラムを開くと最上段にウィンドウ幅、開始位置、その他の座標を表すテーブルが表示されますが、どの様な値が実際に取得されているのかを確認するためのものです。
具体的なプログラムについてメモします。今回は少し多めの<div>要素を発生させるためプログラムに直接記述せずに、行番127～133のＰＨＰプログラムで生成することにしています。行番129でＩＤ番号，行番130でランダム色を生成し、行番131で作成するHTMLに反映させています。
ページ読み込み時（行番27～29）とウィンドウリサイズイベント発生時（行番65）に  “get_window_info()”関数を呼び出し、要素の再配置を行っています。
行番68ではウィンドウサイズを取得します。行番69～72では要素配置の開始位置を取得します。行番74で対象オブジェクトを取得，行番76で対象数，行番77ではウィンドウ幅と要素幅から１行に配置できる要素数，行番78では表示行数を取得します。
これらの情報を使って、行番81～行番93のループ処理内で要素ごとに配置，サイズ等を設定しています。
マウスドラッグによる要素移動は先回投稿内容と基本的には変更していません。

<!doctype html>
<html lang="ja">

<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>DRAG & DROP</title>

    <style>
	* { margin:0; }

	.draw_info th, .draw_info td { border:solid 1px #000000; text-align:center; vertical-align:middle; }
	.draw_info { border: solid 1px #000000; border-collapse:collapse; margin:5px 10px;}

	.div_dragbl { cursor:move; position:absolute; }
    </style>

    <script type="text/javascript">

	var mv_fg=""; 
	var mvs_x=0; var mvs_y=0;
	var tgt_id_no; var z_idx_ini=100;
	var X_STT_P=0; var Y_STT_P=100;
	var img_wdt=100; var img_hgt=70;

	function init_chk(){
	    get_window_info() ;
	}


	// ◆マウスダウン◆
	window.onmousedown = function(e) {

	    mv_fg = "true" ; tgt_id_no = event.target.id ; z_idx_ini = z_idx_ini + 1 ;

	    document.getElementById(tgt_id_no).style.zIndex = z_idx_ini ;
	    mvs_x = event.clientX - parseInt(document.getElementById(tgt_id_no).style.left.replace("px","")) ;
	    mvs_y = event.clientY - parseInt(document.getElementById(tgt_id_no).style.top.replace("px","")) ;

	    document.getElementById("id_no").innerHTML = tgt_id_no ;
	    document.getElementById("x_b").innerHTML = mvs_x ;
	    document.getElementById("y_b").innerHTML = mvs_y ;
	    document.getElementById("z_idx").innerHTML = z_idx_ini ;
	}

	// ◆マウスムーブ◆
	window.onmousemove = function(e) {
	    if(mv_fg == "true") {
		var cur_x = event.clientX - mvs_x ; var cur_y = event.clientY - mvs_y ;

		document.getElementById(tgt_id_no).style.left = cur_x + "px" ;
		document.getElementById(tgt_id_no).style.top = cur_y + "px"  ;
		document.getElementById("x1_c").innerHTML = cur_x ;
		document.getElementById("y1_c").innerHTML = cur_y ;
		document.getElementById("x2_c").innerHTML = cur_x + img_wdt/2 ;
		document.getElementById("y2_c").innerHTML = cur_y + img_hgt/2 ;
	    }
	}

	// ◆マウスアップ◆
	window.onmouseup = function(e) { mv_fg = "false" ; tgt_id_no = "" ; }

	// ◆ウィンドウリサイズ◆
	window.onresize = function(e) { get_window_info() ; }

	function get_window_info(){
	    var sW = window.innerWidth ; var sH = window.innerHeight ;		// ウィンドウサイズ
	    var elm_div = document.getElementById("draggable_div") ;		// 移動領域要素取得
	    var rect = elm_div.getBoundingClientRect() ;			// 移動領域取得
	    X_STT_P = Math.ceil(rect.left/10) + 20 +20 ;			// 移動領域座標（X）
	    Y_STT_P = Math.ceil(rect.top/10) + 20 ;				// 移動領域座標（Y）

	    var drg_elm = document.getElementsByClassName("div_dragbl") ;	// 移動対象要素取得

	    var fct_num = drg_elm.length ;					// 移動対象要素数取得
	    var max_fnm = Math.floor((sW-10)/img_wdt) ;				// １行最大表示要素数
	    var row_num = Math.ceil(fct_num / max_fnm) ;			// 行数表示

	    
	    for(var i=0 ; fct_num > i ; i++){
		var cur_lin = Math.floor( i / max_fnm ) ;
		var cur_row = i - cur_lin * max_fnm ;
		drg_elm[i].style.top = Y_STT_P + cur_lin * img_hgt + "px" ;
		drg_elm[i].style.left = X_STT_P + cur_row * img_wdt + "px" ;

		//drg_elm[i].style.top = Y_STT_P + "px" ;
		//drg_elm[i].style.left = X_STT_P + i * img_wdt + "px" ;
		drg_elm[i].style.width = img_wdt + "px" ;
		drg_elm[i].style.height = img_hgt + "px" ;
		drg_elm[i].style.zIndex = z_idx_ini ;
		drg_elm[i].innerHTML = drg_elm[i].id ;
	    }

	    document.getElementById("W_WDT").innerHTML = sW ;
	    document.getElementById("W_HGT").innerHTML = sH ;
	    document.getElementById("X_STT").innerHTML = X_STT_P ;
	    document.getElementById("Y_STT").innerHTML = Y_STT_P ;
	    document.getElementById("f_wdt").innerHTML = img_wdt ;
	    document.getElementById("f_hgt").innerHTML = img_hgt ;
	}

    </script>
</head>

<body onLoad="init_chk()">
	<div style="position:relative ; float:left;">
	<table class="draw_info">
	<tr><td>Win幅</td><td>Win高</td>
		<td>開始X</td><td>開始Y</td><td>要素W</td><td>要素H</td></tr>
	<tr><td id="W_WDT">-</td><td id="W_HGT">-</td>
		<td id="X_STT">-</td><td id="Y_STT">-</td><td id="f_wdt">-</td><td id="f_hgt">-</td></tr>
	</table>
	</div>

	<div style="position:relative ; float:left;">
	<table class="draw_info">
	<tr><td>要素ＩＤ</td><td>fct_X</td><td>fct_Y</td><td>curX1</td><td>curY1</td><td>curX2</td><td>curY2</td><td>Z_IDX</td></tr>
	<tr><td id="id_no">-</td><td id="x_b">-</td><td id="y_b">-</td>
		<td id="x1_c">-</td><td id="y1_c">-</td><td id="x2_c">-</td><td id="y2_c">-</td>
		<td id="z_idx">-</td></tr>
	</table>
	</div>

	<div id="draggable_div" style="position:relative ; clear:both;">

	<?php
	    for($ii=0; $ii<20 ;$ii++){
		$id_no = substr("000000".strval($ii+1),-6) ;
		$cl_cd = '#'.str_pad(dechex(mt_rand(0, 0xFFFFFF)), 6, '0', STR_PAD_LEFT) ;
		echo '<div class="div_dragbl" id="'.$id_no.'" style="left:0px; top:0px; background-color:'.$cl_cd.';"></div>' ;
	    }
	?>
	
	</div>
</body> 

</html>

 

 

まとめ

次回はマウスドラッグによる要素移動位置によって、要素順序も含めた再配置（並び替え）の検討を行う予定です。