可拖动的绝对位置和底部属性的jQuery UI

我使用jQuery UI来创建可拖动的<div>。该<div>绝对定位到右下角或左上角使用CSS：可拖动的绝对位置和底部属性的jQuery UI

.dragbox { 
    position: absolute; 
    width: 140px; 
    min-height: 140px; /* I need to use min-height */ 
    border: 3px solid black; 
    padding: 10px; 
} 
.bottom { 
    bottom: 5px; /* causes box to resize when dragged */ 
    right: 5px; 
} 
.top { 
    top: 5px; /* does not cause box to resize */ 
    left: 5px; 
}

的HTML看起来像这样：

<div class="dragbox bottom"> 
    Bottom Box :(
</div> 
<div class="dragbox top"> 
    Top Box :) 
</div>

的JavaScript是$('.dragbox').draggable();，使<div>元素可拖动。左上角的<div>按预期工作，但右下角的<div>在拖动时调整大小。如果我将min-height属性.dragbox更改为height我看到了这两个框的预期行为，但我需要使用min-height，因为我不知道内部内容的长度。

如何将<div>定位在右下方，并且在拖动时无需调整<div>的大小即可进行拖动？左上角和右下角<div>元素的行为方式应该是相同的。

DEMO（我使用Chrome 27和Safari 6）

来源

2013-06-25 ChrisP

jQuery的可拖动的作品通过操纵CSS top和left值。当一个方框同时设置了top和bottom值（并且没有静态高度）时，该方框将拉伸以匹配两个属性。这是导致调整大小的原因。

解决方法是在盒子上设置一个静态高度，或者如果这不是一个选项，则在创建可拖动时将底部值设置为“auto”，并同时获取当前的“顶部”位置确保元素保持放置。

$('.dragbox').draggable({ 
    create: function(event, ui) { 
     $(this).css({ 
      top: $(this).position().top, 
      bottom: "auto" 
     }); 
    } 
});

http://jsfiddle.net/expqj/8/

来源

2013-06-25 14:23:44 xec

使用这个想法，我能解决我的情况下，除了盒子具有动态的高度（并且应该向上成长），但幸运的是，在拖曳期间它不会改变。我也这样做，但是使用'start'和'stop'选项，以便在拖动开始时将顶部属性设置为锚点（自动底部），并在结束时将其交换回。 – DonSteep

@xec给我的主要想法，我改变了这种方式，它为我工作;

jQuery("#container").draggable({ 
        start: function (event, ui) { 
         $(this).css({ 
          right: "auto", 
          top: "auto" 
         }); 
        } 
       });

来源

2014-06-10 23:29:47

对我来说，工作这样（我的底，左绝对定位的div）：

 $("#topBarUpDownDiv").draggable({ axis: "x", 
      stop: function(event, ui) { 
       var elem=$(this)[0]; 
       $(elem).css({ bottom: $(this).position().bottom, top: "auto" }); 
      } 
     });

来源

2017-06-19 19:40:28 BernieSF

可拖动的绝对位置和底部属性的jQuery UI

回答

相关问题