获取可拖动对象相对于div的位置

Question

这是jsFiddle，其中我有一个足球场，用户将在其中划分10名球员，分为两个五人小组。我想知道他是把一个球员拖到左边还是晚上(假设场地的中心线是边界)。

下面是js代码:

$(".dragNdrop").draggable({
  drag: function(){
    var offset = $(this).offset();
    var xPos = offset.left;
    var yPos = offset.top;
      console.log('x: ' + xPos);
      console.log($('#footballField').width());
    }
});

我也尝试过position()和offset()，但我似乎找不到正确的公式来做它。

那么，我如何才能发现玩家是位于div的左侧还是右侧呢?

相关问题:如何获取可拖动对象的位置

Answer 1

如果$('#footballField').width()是字段的宽度，您可以检查dragNdrop元素的xPos是否小于或大于footballField left +其宽度除以2:

$(".dragNdrop").draggable({
    drag: function(){
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        console.log('x: ' + xPos);
        //console.log('y: ' + yPos);
        console.log('offset: ' + $('#footballField').offset().left);
        var fieldLeft = $('#footballField').offset().left;
        console.log($('#footballField').width());
        if(xPos < fieldLeft + $('#footballField').width()/2){
             console.log('I am at left');
        }else{
            console.log('I am at right');
        }
    }
});