jquery - Jquery，获取元素的 position().right？

Question

所以我正在努力制作一个可拖动的图像。

很简单，当您将图像拖动到特定位置的左侧或右侧时，我希望图像快速回到左侧或右侧。

在下面的小提琴中，我有左侧的功能..但我不太确定确定右侧的最佳方法是什么，因为 Jquery 只允许顶部和左侧属性。

考虑这段代码：

$(function() {
$(".headerimage").css('cursor', 's-resize');
var y1 = $('.picturecontainer').height();
var y2 = $('.headerimage').height();
$(".headerimage").draggable({
    scroll: false,
    drag: function(event, ui) {
        if (ui.position.left >= 200) {
            ui.position.left = 0;
        }
    },
    stop: function(event, ui) {
        //####
    }
});

小提琴

Answer 1

为了获得元素右侧的位置，我使用了这个 jQuery：

var target = $("selector");
var result = target.position().left + target.width();

确保在获取此值时元素已完全呈现。否则结果可能会关闭。

Answer 2

这个如何：

var rightOffset = $('.parent').width() - ( $(target).position().left +  $(target).width() )

注意：我相信如果您在目标元素周围有边距和边框，这不应该工作，不确定是否可以通过 box-sizing:border-box 修复

Answer 3

那这个呢

drag: function(event, ui) {
       if (ui.position.left >= 200 || ui.position.left <= -300) {
               ui.position.left = 0;
       }
},

http://jsfiddle.net/nk7wc/10/

$(function() {
     $(".headerimage").css('cursor', 's-resize');
     var y1 = $('.picturecontainer').height();
     var y2 = $('.headerimage').height();
     $(".headerimage").draggable({
          scroll: false,
          drag: function(event, ui) {
                if (ui.position.left >= 200 || ui.position.left <= -300) {
                      ui.position.left = 0;
                }
          },
          stop: function(event, ui) {
              //####
          }
     });
});

检查 position.left 的负值

Answer 4

获得位置right=0。Set left = leftposition没有边距 css 已设置

var leftposition = $(parent).width()-$(child).width();

Answer 5

这对我有用：

(function($) {
    $.fn.Right = function() 
    {
        return this.parent().outerWidth() - this.position().left + this.outerWidth();
    };
 })(jQuery);

要使用它：

$("selector").Right();

Answer 6

做位置左+宽度。

$(ui).position().left + $(ui).width();