How do I make the arc of the sun stop at the left end of the page?

Question

I made the sun draggable in an arc, but I want the arc to stop at a certain point which in this case, is the left end of the page. Right now it goes on forever on the left, but I want it to stop. How can I do that?

var width = 300;
var sun = $("#sun");

sun.draggable({
  axis: "x",
  drag: function() {
    var x = sun.offset().left + (width / 2);
    var total = $(window).width();

    var heightPct = Math.pow((total / 2) - x, 2) / Math.pow($(window).width() / 2, 2);
    console.log(x, $(window).width(), heightPct * 100);
    this.style["margin-top"] = "" + Math.round(heightPct * 30) + "%";
  }
});

/* Colors */

body {
  background: url(http://i.imgur.com/aZty7Mq.png);
  animation: mymove 4s linear infinite;
  -webkit-animation: mymove 4s linear infinite;
  -moz-animation: mymove 4s linear infinite;
}
@keyframes mymove {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 40% 0;
  }
}
#dark_sun {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 20%;
  left: 10%;
}
#sun {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 20%;
  left: 10%;
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<img id="dark_sun" src="http://i.imgur.com/f3UFHb7.png">
<img id="sun" src="http://i.imgur.com/DGkZYZQ.png">

Answer 1

Set the containment option to body (or some other container) in your draggable definition, and hide the x-overflow on body in your CSS:

var width = 300;
var sun = $("#sun");

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);
    console.log(x, $(window).width(), heightPct * 100);
    this.style["margin-top"] = "" + Math.round(heightPct * 30) + "%";
  }
});

/* Colors */

body {
  background: url(http://i.imgur.com/aZty7Mq.png);
  padding: 30px;
  overflow-x: hidden;
  animation: mymove 4s linear infinite;
  -webkit-animation: mymove 4s linear infinite;
  -moz-animation: mymove 4s linear infinite;
}
@keyframes mymove {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 40% 0;
  }
}
#dark_sun {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 20%;
  left: 10%;
}
#sun {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 20%;
  left: 10%;
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<img id="dark_sun" src="http://i.imgur.com/f3UFHb7.png">
<img id="sun" src="http://i.imgur.com/DGkZYZQ.png">