获取可拖动对象相对于 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 元素小于或大于 footballField left + his width 除以 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');
        }

    }
});

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

Get position of dragable object, relative to a div

html

javascript

css

jquery

drag