「正しい」CSSとタッチイベントを使用してDivをスライドさせる

Question

私はWebアプリケーションを開発しており、toucheventsを使用して複数のdivをスライドさせ、その下に別のアイテムを表示する必要があります。これらのdivは左または右のいずれかにフローティングされており、開始点から約60pxだけドラッグできるようにする必要があります。

#container{ 
    height: 200px; 
} 

#left{ 
    position: relative; 
    display: block; 
    height: 25px; 
    width: 50px; 
    left: 10px; 
    float: left; 
    background-color: green; 
} 

#right{ 
    position: relative; 
    display: block; 
    height: 25px; 
    width: 50px; 
    right: 10px; 
    float: right; 
    background-color: red; 
} 

は、これまでのところ私はスワイプで「左」のCSSを変更することで、正しく動く左divを取得するために、いくつかの既存のコードを微調整するために管理しています。

しかし、右のdivに「正しい」CSSを使用するためのコードを作成できないようです。

サンプルコードhereを作成しました。左のdivを '左'のCSSと右のdivを '右'のCSSで移動するには、どうすれば既存のコードを取得できますか？

ご注意：代わりにあなたがleftとtopを使用する必要がrelative位置決めのための（あまりにもおそらく他のブラウザ）タッチデバイスを介しやChromeに存在するタッチデバイスツールを使用して、上記codepenますのみ機能

Answer 1

を、そう操作を行います。

left: -10px; 

相対位置、it may not work in the way you are expecting it toとrightとbottom作業中。