获取可拖动对象相对于 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的左侧还是右侧呢？

相关问题：How to get the position of a draggable object

Answer 1

如果$('#footballField').width()是字段的宽度，可以检查dragNdrop元素的xPos是小还是大比 footballField 左边 + 他的宽度除以 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');
        }

    }
});