Перетащите элемент, чтобы повернуть его специфическими °

Question

http://codepen.io/kunokdev/pen/YXNrPx?editors=110

<div id="container"> 

    <div class="item-2"></div> 
    <div class="item-2"></div> 
    <div class="item-2"></div> 
    <div class="item-2"></div> 

</div> 

body { 
    background: #222; 
} 

#container { 
width: 300px; 
height: 300px; 
border-radius: 300px; 
background: #666; 
overflow: hidden; 
} 

.item-2 { 
    float: left; 
    background: blue; 
    width: 50%; 
    height: 150px; 
} 
.item-2:nth-child(2){ 
    background: green; 
} 
.item-2:nth-child(3){ 
    background: yellow; 
} 
.item-2:nth-child(4){ 
    background: red; 
} 

Проверить ссылку первым. Итак, скажем, у меня есть этот круг div. Теперь то, что я хочу, это простая функция, которая будет вращать ее. Если мы перетаскиваем его вправо, он должен вращаться по часовой стрелке. И наоборот.

Answer 1

Я не уверен, если это решение будет работать на мобильном телефоне или нет, но это работает для браузеров: http://codepen.io/anon/pen/LVxzLj

var mouseX; 
var currAngle = 0; 
var container = document.getElementById("container"); 

container.addEventListener("mousedown",function(e){ 
    mouseX = e.pageX; 
    window.addEventListener("mouseup",mouseup,false); 
    window.addEventListener("mousemove",mousemove,false); 
},false); 

function mouseup(){ 
    currAngle = currAngle + e.pageX - mouseX; 
    window.removeEventListener("mouseup",mouseup,false); 
    window.removeEventListener("mousemove",mousemove,false); 
} 

function mousemove(e){ 
    var result = currAngle + e.pageX - mouseX; 
    container.style['transform'] = 'rotate(' + result + 'deg)'; 
    container.style['-webkit-transform'] = 'rotate(' + result + 'deg)'; 
    container.style['-moz-transform'] = 'rotate(' + result + 'deg)'; 
} 

Кроме того, я добавил этот CSS, потому что были некоторые странные поведения с выбором пользователя

#container { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    user-select: none; 
}