jqueryUI可拖动鼠标偏移量

Question

尝试为ios8 Lockscreen编写类似的感觉，让可拖动的项目仅在x轴上移动。

＆＃13;

＆＃13;

$( "#IDlsDragable" ).draggable({ axis: "x" });

＆＃13;

.lockscreen {
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:rgba(89,54,158,1);
  background-image:url('../pics/wall.png');
  background-size:cover;
  background-position:center center;
}

.lockscreenFace {
  position:absolute;
  top:0px;
  left:1080px;
  width:1080px;
  height:1920px;
}

.lockscreenSlider {
  position:absolute;
  top:0px;
  left:-1080px;
  width:200%;
  height:100%;
}

.lockscreenClock {
  position:absolute;
  top:110px;
  left:0px;
  width:100%;
  height:300px;
  font-size: 296px;
  color:white;
  text-align:center;
}

.lockscreenDate {
  position:absolute;
  top:432px;
  left:0px;
  width:100%;
  height:80px;
  font-size: 60px;
  color:white;
  text-align:center;
}

.lockscreenSlideText {
  position:absolute;
  bottom:234px;
  left:0px;
  width:100%;
  height:80px;
  font-size: 80px;
  font-weight:bold;
  color:white;
  text-align:center;
  background:url('../pics/highlight.png');
  -webkit-animation: slidetounlock 3s infinite linear;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lockscreenSlideText:before {
  content: "\f105";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size:85px;
  line-height:1;
  -webkit-font-smoothing: antialiased;
}

@-webkit-keyframes slidetounlock {
  0% {
    background-position: -880px 0;
  }
  100% {
    background-position: 0px 0;
  }
}

＆＃13;

<div class="lockscreen">
  <div id="IDlsDragable" class="lockscreenSlider">
    <div class="lockscreenFace">
      <div id="IDlsClock" class="lockscreenClock">
        #TIME#
      </div>
      <div id="IDlsDate" class="lockscreenDate">
        #DATE#
      </div>
      <div class="lockscreenSlideText">
        slide to unlock
      </div>
      <div class="cameraGrabby">
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

当我开始向右拖动div＆＃34; lockscreenSlider＆＃34;向右急促。

Answer 1

transform:scale([anything]);

这会导致鼠标偏移问题