可拖動的絕對位置和底部屬性的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

回答

相關問題