Draggable And Margin：0 auto;

Question

這是一個jQuery UI可排序/可拖動的問題，如果被拖動的元素使用margin:0 auto居中，則拖動將從容器的左側開始，而不是元素的中心。

繼承人演示顯示我的意思：http://codepen.io/anon/pen/YqWRvV。只需拖動紅色方塊。

如果您從'.drag'元素中刪除margin:0 auto，您將看到拖動正常開始。

如何在使用margin:0 auto居中時如何解決此問題並將其元素拖動到真正位置？

這似乎發生在Google Chrome中。

$("#c").sortable();

`.drag { 
    margin: 0 auto; 
    width: 200px; 
    height: 200px; 
    background-color: red; 
}` 

中心與CSS「鈣」元素修復該問題，但我的元素的寬度可以動態地改變。 'calc'也不如'margin'支持。

在容器中包裝可拖動可修復問題，但HTML更改不是我正在尋找的解決方案。

更新： 所以這不是一個jQuery的bug。這是谷歌瀏覽器的一個錯誤。顯然，錯誤的位置是由鉻檢索的，所以jQuery從chrome告訴它元素的位置開始拖動。我在控制檯中輸出元素的左側位置，當顯然不是13px時，可以看到它是13px。 http://codepen.io/anon/pen/YqWRvV。我想知道這個bug是否被報告過。

SOLUTION http://codepen.io/anon/pen/MyjeJP感謝朱利安·格雷 注意：此方法可能需要一種方法來刷新幫手位置。

Answer 1

不同的Chrome比Firefox返回的位置，但你使用偏移，這是什麼用途排序正確的座標。問題是，在mouseStart，保證金從計算中刪除，這可能有意義，當你有一個保證金設置。但是，由於汽車利潤率的問題，

您可以添加一個選項來忽略邊距並修改_mouseStart。就像這樣：

$("#c").sortable({ 
    ignoreMargins: true 
}); 

$.ui.sortable.prototype._mouseStart = function(event, overrideHandle, noActivation) { 
    ... 
    if (!this.options.ignoreMargins) { 

     this.offset = { 
     top: this.offset.top - this.margins.top, 
     left: this.offset.left - this.margins.left 
     }; 
    } 
    ... 
} 

http://codepen.io/anon/pen/BKzeMp

編輯：

如果你不想修改插件，您可以用開始和停止事件工作。一個問題是很難檢查邊距是否已設置爲自動，因此您可以在可分類調用中定義它們，這不像應該那樣靈活，或者您可以找到一種方法來檢查哪些邊距是自動動態的。

$("#c").sortable({ 
    start: function(e, ui) { 
    var marginsToSet = ui.item.data().sortableItem.margins; 
    // You set the margins here, so they don't go back to 0 
    // once the item is put in absolute position 
     ui.item.css('margin-left', marginsToSet.left); 
     ui.item.css('margin-top', marginsToSet.top); 

    }, 
    stop: function(e, ui) { 
    // Then you need to set the margins back once you stop dragging. 
    // Ideally this should be dynamic, but you have to be able 
    // to check which margins are set to auto, which as you'll 
    // see if you look for some answers on this site, 
    // doesn't look that simple. 
    ui.item.css('margin', '20px auto'); 
    } 
}); 

http://codepen.io/anon/pen/mPrdYp

Answer 2

嘿，我正在測試你的Codepen並在兩個不同的瀏覽器（Mozilla & Chrome）中檢查過它。

我得到了你說的是Chrome的東西。但在Mozilla中它工作正常。

而在鉻位左邊的屬性值是不同的。在Mozilla的意思是它剩下的：560px，而拖動，並在Chrome中，它從左邊開始：0;

這就是從左側顯着顯示拖動元素的原因。

我希望它能幫助你。

Answer 3

更新您的jQuery添加克隆幫手：

$("#c").sortable({ 
helper: "clone" 
}); 

和更新您的CSS添加位置和溢出：

#c { 
    width: 100%; 
    padding: 50px 0px; 
    border: solid 5px; 
    box-sizing: border-box; 
    overflow: hidden; 
    position: relative; 
} 

Updated Codepen

Answer 4

很好的解決辦法我來到身邊是 http://codepen.io/anon/pen/VaaaaZ

使用calc代替汽車在CSS

Answer 5

如果你不能設置中心與CSS比其他選項設置中心與jQuery。 請查閱我的代碼庫更新演示，根據您在本文和其他答案中解釋的反饋和要求進行更新。 Demo

$("#c").sortable(); 

$(".drag").css("margin-left",($(document).width()/2)-125); 
$(window).resize(function(){ 
    $(".drag").css("margin-left",($(document).width()/2)-125); 
}); 

Answer 6

似乎在Chrome .sortable()當您使用margin: 0 auto，只是設置爲0left位置不正確計算元素的位置。所以我想你應該找到其他方式來水平居中你的元素。

---

一種選擇是使用text-align: center父元素和display: inline-block兒童

$("#c").sortable();

#c { 
 
    width: 100%; 
 
    padding: 50px 0px; 
 
    border: solid 5px; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
} 
 

 
.drag { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<div id="c"> 
 
    <div class="drag"></div> 
 
</div>

另一種是使用Flexbox和中心子元素與justify-content: center

$("#c").sortable();

#c { 
 
    width: 100%; 
 
    padding: 50px 0px; 
 
    border: solid 5px; 
 
    box-sizing: border-box; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.drag { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<div id="c"> 
 
    <div class="drag"></div> 
 
</div>