Question

drop: function( event, ui)
        {
            draggableDocumentOffset = ui.helper.offset(),
            droppableDocumentOffset = $(this).offset(),  
            left = draggableDocumentOffset.left - droppableDocumentOffset.left,
            top = draggableDocumentOffset.top - droppableDocumentOffset.top; 
        }

我使用div作为可放置区域。我想得到被删除元素相对于它被删除的div的位置。

Answer 1

您可以使用$(this)的宽度来获得百分比（我不是100％明确百分比的来源，但是使用宽度/高度和x / y坐标可以计算出一个百分比百分比）：

var percentLeft = (left/$(this).width()) * 100,
    percentTop  = (top/$(this).height()) * 100;

你似乎在一个有点奇怪的庄园里使用.offset()。你见过.position()吗？它根据文档的offset parent而不是文档给出元素的位置：http://api.jquery.com/position

更新

要获取相对于droppable容器的位置，您可能只需要使用.position()：

var left = $(this).position().left,
    top  = $(this).position().top,
    percentLeft = (left / [droppable container].width()) * 100,
    precentTop  = (top / [droppable container].height()) * 100;

其中[droppable container]是一个选择了droppable容器的jQuery对象。可放置容器必须将其position设置为static以外的值（默认值），以使其成为元素的偏移父级。

我对jQuery UI的draggable / droppable不是很熟悉，但我希望这会有所帮助。如果没有，也许您可以使用event对象中的某些信息来计算百分比。

Answer 2

有些数学人员会做这项工作：

positionPercent = (positionPixel / containerPixelWidth) * 100

然后，在你的情况下：

positionPercentLeft = Math.round(left/$(this).width()*100),
positionPercentTop  = Math.round(top/$(this).height()*100);

Answer 3

您可以将像素转换为drop div的百分比。对于您的代码，您可以添加：

 div_width =  //width of drop div can use .css() or .width()
 div_height = // height of drop div can use .css() or .height()

 div_left = //left position of div can use .offset()
 div_top = //top postion of div can use .offset()   

 left_percent = ((left - div_left )/div_width) * 100;
 top_percent = ((top - div_top)/div_height) * 100;

编辑：更新了相关更改。如果要删除的元素包含在该区域中，则此方法有效。我相信这次活动会有回调。

Answer 4

使用可投放项目的高度和宽度，您可以计算百分比：

w=$(this).width();
h=w=$(this).height();
left_percentage=(left*100)/w;
top_percentage=(top *100)/h;

像素到百分比

4 个答案:

更新