如何在jQuery中移动cropbox窗口？

Question

我正在使用名为Cropbox的插件来裁剪图片。此插件可让用户预览图像的裁剪方式，并可根据需要裁剪。我想知道如何在不改变其所处的div的位置的情况下改变裁剪窗口的位置。例如，我想给裁剪窗口一个边缘-left of 10px。我不希望两个窗口都有一个左边的更改，只有一个窗口。我该如何做到这一点？这是jsFiddle。

HTML

<form>
  <div id='imgContainer'>
    <div id='elements'>
      <input type='file' id='choice1'>
    </div>
  </div>
 <input type='file' id='choice2'>
</form>

的jQuery

$(function() {

  $("#choice1").on('change', function() {
    $("#elements").hide();
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function() {
      var $img = $('<img />').attr({
        src: reader.result
      });

      $img.on('load', function() {
        $img.cropbox({
          width: 300,
          height: 300
        }).on('cropbox', function(event, results, img) {

        });
      });
      $('#imgContainer').append($img);
    };
    reader.readAsDataURL(file);
  });
});

$(function() {

  $("#choice2").on('change', function() {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function() {
      var $img = $('<img />').attr({
        src: reader.result
      });

      $img.on('load', function() {
        $img.cropbox({
          width: 300,
          height: 300
        }).on('cropbox', function(event, results, img) {

        });
      });
      $('#imgContainer').append($img);
    };
    reader.readAsDataURL(file);
  });
});