ken_nogi/Pleasanter/Extended/wwwroot/myScripts/rectMove.js

(function () {
	//要素の取得
	var elements = document.getElementsByClassName('drag-and-drop');
	//要素内のクリックされた位置を取得するグローバル（のような）変数
	var x;
	var y;

	//マウスが要素内で押されたとき、又はタッチされたとき発火
	for (var i = 0; i < elements.length; i++) {
		elements[i].addEventListener('dblclick', dbclick, false);
		elements[i].addEventListener('mousedown', mdown, false);
		elements[i].addEventListener('touchstart', mdown, false);
	}

	//マウスが押された際の関数
	function dbclick(e) {
		console.log(this);
		$(this).data('double', 2);
		this.classList.add('hideRect');
		this.classList.remove('showRect');
		let rectId = this.id;
		console.log(rectId);
		if (rectId == 'rect1') {
			this.style.top = '30px';
			this.style.left = '770px';
		} else if (rectId == 'rect2') {
			this.style.top = '60px';
			this.style.left = '770px';
		} else if (rectId == 'rect3') {
			this.style.top = '100px';
			this.style.left = '770px';
		} else if (rectId == 'rect4') {
			this.style.top = '150px';
			this.style.left = '770px';
		} else if (rectId == 'rect5') {
			this.style.top = '210px';
			this.style.left = '770px';
		}
		mup(e);
	}

	function mdown(e) {
		var that = this;
		setTimeout(function () {
			var dblclick = parseInt($(that).data('double'), 10);
			if (dblclick > 0) {
				$(that).data('double', dblclick - 1);
			} else {
				//クラス名に .drag を追加
				that.classList.add('drag');
				that.classList.add('showRect');
				that.classList.remove('hideRect');
				//console.log(this);

				//タッチデイベントとマウスのイベントの差異を吸収
				if (e.type === 'mousedown') {
					var event = e;
				} else {
					var event = e.changedTouches[0];
				}

				//要素内の相対座標を取得
				x = event.pageX - that.offsetLeft;
				y = event.pageY - that.offsetTop;

				//ムーブイベントにコールバック
				document.body.addEventListener('mousemove', mmove, false);
				document.body.addEventListener('touchmove', mmove, false);
			}
		}, 200);
	}

	//マウスカーソルが動いたときに発火
	function mmove(e) {
		//ドラッグしている要素を取得
		var drag = document.getElementsByClassName('drag')[0];

		//同様にマウスとタッチの差異を吸収
		if (e.type === 'mousemove') {
			var event = e;
		} else {
			var event = e.changedTouches[0];
		}

		//フリックしたときに画面を動かさないようにデフォルト動作を抑制
		e.preventDefault();

		//マウスが動いた場所に要素を動かす
		drag.style.top = event.pageY - y + 'px';
		drag.style.left = event.pageX - x + 'px';

		//マウスボタンが離されたとき、またはカーソルが外れたとき発火
		drag.addEventListener('mouseup', mup, false);
		document.body.addEventListener('mouseleave', mup, false);
		drag.addEventListener('touchend', mup, false);
		document.body.addEventListener('touchleave', mup, false);
	}

	//マウスボタンが上がったら発火
	function mup(e) {
		var drag = document.getElementsByClassName('drag')[0];

		//ムーブベントハンドラの消去
		document.body.removeEventListener('mousemove', mmove, false);
		drag.removeEventListener('mouseup', mup, false);
		document.body.removeEventListener('touchmove', mmove, false);
		drag.removeEventListener('touchend', mup, false);

		//クラス名 .drag も消す
		drag.classList.remove('drag');
	}
})();