javascript - 如何在拖动元素时获取元素的位置值

Question

我试图在拖动时获取名为“draggable”的元素的位置，以便我可以将值用于 if 语句(例如，如果将“draggable”放置在图像上，则显示分配的数字到“可拖动”)。控制台日志显示了每个元素的位置，但我不知道如何根据它在页面上被拖动的位置来改变这些值。我该怎么做？

使用 jquery-1.7.2.min.js

jQuery(document).ready(function(){
$('.draggable').draggable({
        cursor:'move',
        opacity: 0.7,
    var element = $('.draggable');
    var position = element.position();
    console.log("left:" + position.left + "top:" + position.top);
    });
$('.draggable').each(function(){
    var element = $(this);
    var offset1 = element.offset();
    console.log("left:" + offset1.left + "top:" + offset1.top);
  });
});

Answer 1

为此创建了一个代码笔:https://codepen.io/anon/pen/XGZLLW?editors=1111

<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>

$( function(){
  $('#draggable').draggable({
    cursor:'move',
    opacity: 0.7,
    drag: function(){
      var element = $('#draggable');
      var position = $(this).position();
      console.log(position.left + ", " position.top);    
    }
  });
});

您可以挂接到拖动事件来执行此操作。我还强烈建议为此使用唯一 ID 而不是类。

文档中也有很好的信息:https://jqueryui.com/draggable/

更新:为了让它适用于同一个类的多个对象，您可以利用 $(this) 来抓取拖动中的事件元素，如下所示:

$( function(){
  $('.draggable').draggable({
    cursor:'move',
    opacity: 0.7,
    drag: function(){
      var position = $(this).position();
      $(this).find(".xpos").html(position.left);
      $(this).find(".ypos").html(position.top);      
    }
  });
});

还在笔上更新了这个:https://codepen.io/anon/pen/XGZLLW