使用'正確'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; 
} 

到目前爲止，我已經成功地調整一些現有的代碼來獲得左側的div通過修改輕掃「左」的CSS正確運動。

但是，我似乎無法得到代碼爲右手div使用'正確的'css工作。

我創建了一個示例codepen here，我如何獲得現有的代碼，通過'左'CSS和右分區通過'右'CSS移動左邊的div？

請注意：以上codepen將只通過觸摸設備或通過使用存在於Chrome瀏覽器（也許還有其他的瀏覽器太）觸摸設備工具

Answer 1

對於relative定位你需要使用left和top，所以不是函數這樣做：

left: -10px; 

雖然right和bottom相對定位工作，it may not work in the way you are expecting it to。