/** * 共通スクリプト */ /** * 対象タグのエレメント全取得 * @param string tag_name 取得対象タグ * @return array{object} 取得エレメント配列 */ function cs_elms_tag_get( tag_name ) { var elms; // エレメント配列 if ( document.all ) { // IE elms = document.all.tags( tag_name ); } else if ( document.getElementsByTagName ) { // FireFox elms = document.getElementsByTagName( tag_name ); } else { } return elms; } /** * クリックボタン種別取得 * @return int クリック種別 */ function cs_click_type_get(e) { var click_type; // クリック種別 // 初期化 click_type = -1; if (document.all) { // IE用 switch( event.button ) { case 1 : // 左 click_type = DD_CLICK_LEFT; break; case 2 : // 右 click_type = DD_CLICK_RIGHT; break; case 4 : // 中央 click_type = DD_CLICK_CENTER; break; } } else if (document.getElementsByTagName) { // FireFox用 switch( e.button ) { case 0 : // 左 click_type = DD_CLICK_LEFT; break; case 1 : // 右 click_type = DD_CLICK_RIGHT; break; case 2 : // 中央 click_type = DD_CLICK_CENTER; break; } } return click_type; } /** * クリック座標取得 * @return array{int} クリック座標(x,y) */ function cs_mouse_pos_get(e) { // クリック座標 var mouse_pos = { 'x' : 0, 'y' : 0 }; // 初期化 mouse_pos.x = 0; mouse_pos.y = 0; if (document.all) { // IE用 mouse_pos.x = event.clientX + document.body.scrollLeft; mouse_pos.y = event.clientY + document.body.scrollTop; } else if (document.getElementsByTagName) { // FireFox用 mouse_pos.x = e.pageX; mouse_pos.y = e.pageY; } return mouse_pos; } /** * 対象エレメントを透過 * @param object elm 対象エレメント * @param float rate 透過率(0-1) */ function cs_elm_opacity_set( elm, rate ) { // IE用設定 elm.style.filter = 'alpha(opacity=' + ( rate*100 ) + ')'; elm.style.MozOpacity = rate; // FireFox用設定 elm.style.opacity = rate; // Safari用設定 return; } /** * エレメント絶対座標取得 * @param object elm 対象エレメント * @return object 絶対位置(top,left,width,height) */ function cs_elm_absolute_pos_get( elm ) { var search_elm; // 検索用ワーク var parent_elm; // 検索用ワーク // 矩形 var rect = { 'top' : 0, 'left' : 0, 'width' : 0, 'height' : 0 }; // 自身の幅高さ設定 rect.width = elm.clientWidth; rect.height = elm.clientHeight; // 親エレメントからオフセット位置算出 search_elm = elm; while ( search_elm != null && search_elm.tagName.toUpperCase() != 'BODY') { // 0でなければ加算 if ( parseInt( search_elm.offsetLeft ) != 0) { // 親エレメントのleft加算 rect.left = rect.left + parseInt( search_elm.offsetLeft ); } // 0でなければ加算 if (parseInt( search_elm.offsetTop ) != 0) { // 親エレメントのtop加算 rect.top = rect.top + parseInt( search_elm.offsetTop ); } // 次の親検索用エレメント設定 search_elm = search_elm.offsetParent; } return rect; } /** * ドラッグ＆ドロップ用スクリプト */ /** * 定数変数 */ var DD_CLICK_LEFT = 0; // 左クリック var DD_CLICK_RIGHT = 1; // 右クリック var DD_CLICK_CENTER = 2; // 中央クリック var DD_MOVE_MARGIN = 5; // 移動判定マージン /** * グローバル変数 */ var ddv_drag_tag_name; // ドラッグ対象タグ var ddv_drop_tag_name; // ドロップ対象タグ var ddv_drag_elm; // ドラッグ中エレメント var ddv_org_pos = { 'x' : 0, 'y' : 0 }; // ドラッグエレメント元位置 var ddv_offset = { 'x' : 0, 'y' : 0 }; // var ddv_mouse_down_pos = { 'x' : 0, 'y' : 0 }; // マウスクリック位置 var ddv_press_flg = false; var ddv_drop_rect = { 'top' : 0, 'left' : 0, 'width' : 0, 'height' : 0 }; /** * ドラッグ＆ドロップ処理初期化 * @param string drag_tag_name ドラッグ対象タグ名称 * @param string drop_tag_name ドロップ対象タグ名称 */ function dd_init( drag_tag_name, drop_tag_name ) { var drag_elms; // ドラッグ対象エレメント配列 var drop_elms; // ドロップ対象エレメント配列 var ec; // エレメントカウンタ var drag_id; // エレメントカウンタ // ドラッグ、ドロップ対象タグ名称設定 ddv_drag_tag_name = drag_tag_name; ddv_drop_tag_name = drop_tag_name; // ドラッグ、ドロップ対象タグ取得 drag_elms = cs_elms_tag_get( ddv_drag_tag_name ); drop_elms = cs_elms_tag_get( ddv_drop_tag_name ); // ドラッグ対象エレメントにマウスイベント設定 for ( ec = 0; ec < drag_elms.length; ec++ ) { // ID有無チェック if ( drag_elms[ec].getAttribute( 'drag_id', null ) != null ) { // マウスイベント設定 drag_elms[ec].onmousedown = dd_onMouseDown; } } // ドロップ位置をグローバルに設定 for ( ec = 0; ec < drop_elms.length; ec++ ) { // ID有無チェック if ( drop_elms[ec].getAttribute( 'drop_id', null ) != null ) { // ドロップ位置設定 ddv_drop_rect = cs_elm_absolute_pos_get( drop_elms[ec] ); } } // マウスイベント設定 document.onmousemove = dd_onMouseMove; document.onmouseup = dd_onMouseUp; } /** * ドラッグ＆ドロップ位置初期化 * @param string drop_tag_name ドロップ対象タグ名称 */ function dd_pos_init() { var drop_elms; // ドロップ対象エレメント配列 var ec; // エレメントカウンタ // ドラッグ、ドロップ対象タグ取得 drop_elms = cs_elms_tag_get( ddv_drop_tag_name ); // ドロップ位置をグローバルに設定 for ( ec = 0; ec < drop_elms.length; ec++ ) { // ID有無チェック if ( drop_elms[ec].getAttribute( 'drop_id', null ) != null ) { // ドロップ位置設定 ddv_drop_rect = cs_elm_absolute_pos_get( drop_elms[ec] ); } } return; } /** * ドラッグ用エレメント作成 * @param object base_elm ドラッグ対象エレメント * @return object ドラッグ用エレメント */ function dd_drag_elm_make( base_elm ) { var drag_elm; // ドラッグ用エレメント var absolute_rect; // 絶対座標矩形 var href; // 移動先 // エレメントコピー drag_elm = base_elm.cloneNode(true); // スタイルシート適用 drag_elm.className='drag_elm'; // 絶対座標算出 absolute_rect = cs_elm_absolute_pos_get( base_elm ); // 座標設定 drag_elm.style.top = absolute_rect.top; drag_elm.style.left = absolute_rect.left; drag_elm.style.width = absolute_rect.width; drag_elm.style.height = absolute_rect.height; // 透過設定 cs_elm_opacity_set( drag_elm, 0.6); // 最前面へ drag_elm.style.zIndex = '9999'; // 親がAタグかチェック if ( base_elm.parentNode.tagName == 'A' ) { // Aタグの移動先取得 href = base_elm.parentNode.getAttribute('href'); drag_elm.setAttribute( 'click_url', href ); } return drag_elm; } /** * ドラッグ＆ドロップ用マウスダウンイベント処理 */ function dd_onMouseDown(e) { var click_type; // クリック種別 var drag_elm; // ドラッグ用エレメント var brc = true; // 戻り値 // クリック種別取得 click_type = cs_click_type_get(e); // 左クリックのみ処理する if ( click_type == DD_CLICK_LEFT ) { // ボタン押下フラグチェック if (ddv_press_flg == false) { ddv_press_flg = true; // ドラッグ用のエレメントを作成 drag_elm = dd_drag_elm_make( this ); // ドラッグ用のエレメントを設定 ddv_drag_elm = this.parentNode.parentNode.appendChild( drag_elm ); // マウス座標抽出 ddv_mouse_down_pos = cs_mouse_pos_get(e); // 移動開始オフセット座標算出 if (document.all) { // IE用 ddv_offset.x = event.offsetX + 2; ddv_offset.y = event.offsetY + 2; } else if (this.getElementsByTagName) { // FireFox用 ddv_offset.x = e.pageX - parseInt(ddv_drag_elm.style.left); ddv_offset.y = e.pageY - parseInt(ddv_drag_elm.style.top); } // 元の位置退避 ddv_org_pos.x = ddv_drag_elm.offsetLeft; ddv_org_pos.y = ddv_drag_elm.offsetTop; // 戻り値設定 brc = false; } } return brc; } /** * ドラッグ＆ドロップ用マウス移動イベント処理 */ function dd_onMouseMove(e) { var mouse_pos; // マウス座標 var brc = true; // 戻り値 if ( ddv_drag_elm ) { // マウス座標抽出 mouse_pos = cs_mouse_pos_get(e); // ドラッグオブジェクトの移動 ddv_drag_elm.style.left = mouse_pos.x - ddv_offset.x; ddv_drag_elm.style.top = mouse_pos.y - ddv_offset.y; // 戻り値設定 brc = false; } return brc; } /** * ドラッグ＆ドロップ用マウスアップイベント処理 */ function dd_onMouseUp(e) { var click_type; // クリック種別 var mouse_pos; // マウス座標 var brc = true; // 戻り値 var href; // 移動先 var parent_elm; // 親エレメント if ( ddv_drag_elm ) { // クリック種別取得 click_type = cs_click_type_get(e); // 左クリックのみ処理する if (click_type == DD_CLICK_LEFT) { // ボタン押下フラグチェック if (ddv_press_flg == true) { ddv_press_flg = false; // マウス座標抽出 mouse_pos = cs_mouse_pos_get(e); // パーツ情報取得 parts_no = ddv_drag_elm.getAttribute('drag_parts_no'); parts_name = ddv_drag_elm.getAttribute('drag_parts_name'); parts_sub_name = ddv_drag_elm.getAttribute('drag_parts_sub_name'); parts_price = ddv_drag_elm.getAttribute('drag_parts_price'); parts_package_num = ddv_drag_elm.getAttribute('drag_parts_package_num'); parts_package_mess = ddv_drag_elm.getAttribute('drag_parts_package_mess'); table_id = ddv_drag_elm.getAttribute('drag_table_id'); user_id = ddv_drag_elm.getAttribute('drag_user_id'); sub_id = ddv_drag_elm.getAttribute('drag_sub_id'); // 出し入れ判定 if ( ddv_drag_elm.getAttribute( 'inside_flg' , null ) == null ) { // ターゲット内に置いたかチェック // X,Y座標チェック if ( ddv_drop_rect.left < mouse_pos.x && mouse_pos.x < (ddv_drop_rect.left + ddv_drop_rect.width) && ddv_drop_rect.top < mouse_pos.y && mouse_pos.y < (ddv_drop_rect.top + ddv_drop_rect.height)) { // パーツ情報をカートに設定 dsp_cart_add_drag(user_id, table_id, parts_no, parts_name, parts_sub_name, parts_price, parts_package_num, parts_package_mess, sub_id); } } else { // ターゲットから出たかチェック // X,Y座標チェック if (mouse_pos.x < ddv_drop_rect.left || (ddv_drop_rect.left + ddv_drop_rect.width) < mouse_pos.x || mouse_pos.y < ddv_drop_rect.top || (ddv_drop_rect.top + ddv_drop_rect.height) < mouse_pos.y) { // パーツ情報をカートから削除 dsp_cart_del_drag(user_id, table_id, parts_no, parts_name, parts_sub_name, parts_price, parts_package_num, parts_package_mess, ''); } } // 移動が無いクリックかチェック move_margin = DD_MOVE_MARGIN; // X座標チェック if ((ddv_mouse_down_pos.x - move_margin) < mouse_pos.x && mouse_pos.x < (ddv_mouse_down_pos.x + move_margin)) { // Y座標チェック if ((ddv_mouse_down_pos.y - move_margin) < mouse_pos.y && mouse_pos.y < (ddv_mouse_down_pos.y + move_margin)) { // 移動先抽出 href = ddv_drag_elm.getAttribute('click_url'); // ページ移動 location.href = href; } } parent_elm = ddv_drag_elm.parentNode; if ( parent_elm != null ) { // ドラッグオブジェクト削除 ddv_drag_elm.parentNode.removeChild(ddv_drag_elm); } ddv_drag_elm = null; // 戻り値設定 brc = false; } } } return brc; }