jQuery Draggable，将位置转换为百分比 [英] jQuery Draggable, convert position to percentage

问题描述

我不确定该怎么做.我正在使用可拖动的jQuery，我需要捕获网格位置:

I'm not sure how to do this. Im using jQuery draggable, and I need to capture grid position:

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

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

Looking at the object receiver from stop event :

Object { top=178, left=950}

我需要将顶部和左侧的值转换为百分比，因此可以将.item元素用作内联样式.父级"#draggable"的宽度和高度将是动态的，因此这就是为什么我需要百分比而不是像素的原因.因此，在调整屏幕大小时，父元素中的所有内容(位置)都将保持不变

I need to convert top and left values into percentage, so I can apply to .item element as inline style. Parent "#draggable" width and height will be dynamic, so that's why I need percentage instead of pixel. So when screen is resized, everything will remain the same (position) within parent element

推荐答案

如果您使用的是jQueryUI Draggable

If you are using 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);
    }
});

这篇关于jQuery Draggable，将位置转换为百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！