Draggable And Margin: 0 auto;

Question

Theres проблема с jQuery UI sortable/draggable, где, если перемещаемый элемент центрируется с использованием margin:0 auto, перетаскивание начинается с левой стороны контейнера, а не центра, где находится элемент.

Heres demo, чтобы показать что я: http://codepen.io/anon/pen/YqWRvV. Просто перетащите красный квадрат.

Если вы удалите margin:0 auto из элемента '.drag', вы увидите, что перетаскивание начинается нормально.

Как я могу исправить эту проблему и удалить элемент с того места, где он находится на самом деле, при центрировании с помощью margin:0 auto?

Это похоже на Google Chrome.

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

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

центрирования элемент с CSS «известково» исправляет проблему, но мои элементы ширина может изменяться динамически. Также «calc» не поддерживается так же, как «margin».

Обертка перетаскиваемого контейнера устраняет проблему, но изменения HTML не являются решением, которое я ищу.

UPDATE: Так что это не ошибка jQuery. Это ошибка с Google Chrome. По-видимому, неправильная позиция извлекается хром, и поэтому jQuery запускает перетаскивание, откуда хром сообщает, где находится элемент. Я выводил левую позицию элемента в консоли, и вы можете видеть, что это 13 пикселей, когда это явно не так. http://codepen.io/anon/pen/YqWRvV. Мне интересно, была ли эта ошибка обнаружена.

РЕШЕНИЕ http://codepen.io/anon/pen/MyjeJP Благодаря Julien Грегуар Примечание: Это решение может понадобиться способ обновить позицию помощника.

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

EDIT:

Если вы не хотите, чтобы изменить плагин, вы можете работать с начала и остановки событий. Одна из проблем заключается в том, что трудно проверить, установлены ли поля в auto, поэтому вы определяете их в своем сортируемом вызове, который не так гибок, как должен быть, или вы можете найти способ проверить, какие поля автоматически динамически.

$("#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. Пожалуйста, ознакомьтесь с демо-версией i, обновленной в вашей базе кода, на ваши отзывы и требования, которые вы объяснили в этом сообщении и ответ другого. 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 и просто установить left позицию 0. Поэтому я думаю, вы должны найти другой способ горизонтально сосредоточить свой элемент.

---

Одним из вариантов является использование 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>