Javascript 可拖动同时拖动两个元素

我想在同一时间和同一地点同时拖动“太阳”和“暗太阳”。随着“太阳”被重新定位，我希望“黑暗的太阳”也被重新定位。但是“黑暗的太阳”应该一直在“太阳”后面

/*颜色*/
身体{
背景：url(http://i.imgur.com/aZty7Mq.png);
动画：mymove 4s线性无限；
-webkit动画：mymove 4s线性无限；
-moz动画：mymove 4s线性无限；
}
@关键帧mymove{
0%{背景位置：0；}
50%{背景位置：40%0；}
}
#阴阳{
位置：绝对位置；
宽度：300px；
高度：300px；
最高：20%；
左：10%；
}
#太阳{
位置：绝对位置；
宽度：300px；
高度：300px；
最高：20%；
左：10%；
}
var宽度=300；
var sun=$（“#sun”）；
日晒({
轴：“x”，
遏制:"身体",，
拖动：函数（）{
var x=sun.offset（）.left+（sun.width（）/2）；
var total=$（window.width（）；
var heightPct=Math.pow（（总计/2）-x，2）/Math.pow（$（窗口）.width（）/2，2）；
console.log（x，$（window.width（），heightPct*100）；
此.style[“页边距顶部]=“”+数学.round（heightPct*30）+“%”；
}
});

var sun  = $("#sun");
var dark = $("#dark_sun");                /* what about getting him too? */

sun.draggable({
  axis: "x",
  containment: 'body',
  drag: function() {
    var x = sun.offset().left + (sun.width() / 2);
    var total = $(window).width();
    var heightPct = Math.pow((total / 2) - x, 2) / Math.pow($(window).width() / 2, 2);

    $(this).css({
      marginTop: heightPct * 30 +"%"
    });

    dark.css({                           /* and update it's position accordingly */
      left:x -(sun.width()/2),
      marginTop: heightPct * 30 +"%"
    });

  }
});

您还可以使用

ui

回调属性值，如：

ui.position.left // See below demo

---

非常感谢您，我一直在到处寻找ANSWER@MunizaSiddiqui：D hh不客气戴帽子的人很可爱；）作为一个想法：我将两个太阳放置在一个

中，并计算

的位置，而不是单独定位两个太阳，以避免鼠标移动过快时发生这种情况。

var sun  = $("#sun");
var dark = $("#dark_sun");                /* what about getting him too? */

sun.draggable({
  axis: "x",
  containment: 'body',
  drag: function() {
    var x = sun.offset().left + (sun.width() / 2);
    var total = $(window).width();
    var heightPct = Math.pow((total / 2) - x, 2) / Math.pow($(window).width() / 2, 2);

    $(this).css({
      marginTop: heightPct * 30 +"%"
    });

    dark.css({                           /* and update it's position accordingly */
      left:x -(sun.width()/2),
      marginTop: heightPct * 30 +"%"
    });

  }
});