jQuery Draggable,将位置转换为百分比

Question

我不知道该怎么做.我使用jQuery draggable,我需要捕获网格位置:

  $("#draggable .item").draggable({
      containment: "#dragablle",
      snap: '.gridlines',
      stop: function(event, ui) {
          console.log(ui)
      }
  });

从停止事件看对象接收器:

Object { top=178, left=950}

我需要将top和left值转换为百分比,因此我可以将.item元素应用为内联样式.父"#draggable"宽度和高度将是动态的,这就是我需要百分比而不是像素的原因.因此,当调整屏幕大小时,所有内容将保持在父元素内相同(位置)

Answer 1

如果您使用的是jQueryUI Draggable

试试这个:

$("#draggable .item").draggable({
    containment: "#draggable",
    snap: '.gridlines',
    stop: function () {
        var l = ( 100 * parseFloat($(this).position().left / parseFloat($(this).parent().width())) ) + "%" ;
        var t = ( 100 * parseFloat($(this).position().top / parseFloat($(this).parent().height())) ) + "%" ;
        $(this).css("left", l);
        $(this).css("top", t);
    }
});