修复多div容器内jQuery draggable元素滚动时位置偏移问题

scroll: false参数仅能控制拖拽过程中页面/容器不自动触发滚动，无法解决已放置元素的定位锚定问题。
当前拖拽元素未以放置容器.documents为定位基准，默认参考文档流定位，容器滚动时元素没有和容器绑定相对位置关系，就会出现跟随滚动偏移的现象。

1. 补充CSS定位规则 #

给放置容器和拖拽元素设置匹配的定位属性，建立父子定位锚定关系：

/* 放置容器设置相对定位，作为内部拖拽元素的定位参考系 */
.documents {
  position: relative;
}
/* 拖拽元素设置绝对定位，位置完全相对于父容器计算 */
.signatureImage {
  position: absolute;
}

2. 调整draggable初始化配置 #

新增appendTo配置，确保拖拽全程元素都在放置容器内部，避免位置计算参考body而非目标容器：

$(".signatureImage").on("mousedown mouseup", function(e) {
  // 原有鼠标事件逻辑保留
}).draggable({
  containment: ".documents",
  cursor: "all-scroll",
  scroll: false,
  appendTo: ".documents", // 拖拽时元素不脱离目标容器
  grid: [5, 5],
  zIndex: 1000,
  drag: function(event,ui){
    // 拖拽过程中如果需要取实时坐标，ui.position就是相对父容器的值，不用再取全局offset
    var xPos = ui.position.left;
    var yPos = ui.position.top;
  },
  stop: function(e, ui) {
    // 这里拿到的finalxPos、finalyPos就是相对.documents容器的坐标，直接持久化存储即可
    var finalxPos = ui.position.left;
    var finalyPos = ui.position.top;
    console.log('Stop: '+finalxPos + ' - '+finalyPos);
    jQuery.post("ajaxs/", {
      finalxPos:  finalxPos,
      finalyPos:  finalyPos,
    }, function(data) {
      // 接口返回逻辑保留
    });
  }
})

• 如果.signatureImage是动态生成的元素，必须等元素插入到.documents容器DOM节点内之后，再初始化draggable插件，否则定位参考系会失效。
• 回显已保存的拖拽元素位置时，直接给元素设置left: [存储的x坐标值]px; top: [存储的y坐标值]px即可，不需要额外计算全局偏移量，容器滚动时元素位置会保持和容器相对固定，不会出现位移。

内容的提问来源于stack exchange，提问作者Mir Souza