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

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

1 个答案: