ダイヤルノブ

ドラッグしながら回転するダイヤルノブを実装する方法をご紹介します。

  • ※ CSS3に対応したブラウザでのみ動作します。

デモ

サンプルコード

HTML

<div><button type="button" id="dial-knob"></button></div>

CSS


#dial-knob {
	position:relative;
	border:10px solid #69c0cc;
	border-radius:50%;
	padding:0;
	width:200px;
	height:200px;
	background:#7fd8e4;
	cursor:pointer;
}

	#dial-knob::-moz-focus-inner {
		border:none;
		padding:0;
	}

	#dial-knob::before {
		position:absolute;
		top:calc(50% - 10px);
		right:10px;
		border-radius:50%;
		width:20px;
		height:20px;
		background-color:rgba(255, 255, 255, 0.6);
		content:"";
	}

JavaScript

var dialElem = document.getElementById('dial-knob');

if (!dialElem) return;

var isDragging = false;

/**
 * 更新
 * @param {Object} evt イベントオブジェクト
 */
var updateDraw = function(evt) {
	var bounds      = dialElem.parentNode.getBoundingClientRect(),
	    dialCenterX = bounds.left + (dialElem.offsetWidth / 2),
	    dialCenterY = bounds.top + (dialElem.offsetHeight / 2),
	    radian      = Math.atan2(evt.clientY - dialCenterY, evt.clientX - dialCenterX);

	dialElem.style.transform = 'rotate(' + (radian * (180 / Math.PI)) + 'deg)';
};

dialElem.addEventListener('mousedown', function(ev) {
	isDragging = true;
	updateDraw(ev || event);
});

window.addEventListener('mousemove', function(ev) {
	if (!isDragging) return;
	updateDraw(ev || event);
});

window.addEventListener('mouseup', function() {
	isDragging = false;
});

JavaScriptの14行目から17行目で要素とマウスのそれぞれの座標からラジアンを求め、19行目でラジアンから角度に変換した値をCSSのtransform:rotateで回転させています。

JavaScript逆引きリファレンス一覧へ戻る