Я разработал программу Javascript (код ниже) для перетаскивания некоторых элементов <span>, содержащих (греческие) символы и содержащихся в простом элементе <div>.
В первый раз страница отображается правильно; все символы выровнены по вертикали .
Я могу увеличивать или уменьшать высоту или ширину окна, и все символы продолжают выравниваться по вертикали.
Я могу перемещать символы в <div>, используя стандартный drag and drop новый JavaScript API.
Но что-то go неправильно. Вертикальное выравнивание начинает теряться!
После 10 или более ходов я вижу следующий результат
Обычно blue-vertical бар не виден, но в некоторых ситуациях он появляется неожиданно. Это не ошибка, только характеристика c, которую я сейчас использую, чтобы объяснить, что происходит.
У меня такой же результат на последней версии (2020): Opera, Chrome, Edge Chromium и Firefox.
На Firefox, когда я проверяю элемент, зона space-text отображается между всеми <span> в <div>. После каждого хода зона space-text между <span> выпадающим и <span> целью (<span>, на которую был сброшен перетаскиваемый <span>) удаляется!
Эта space-text зона, видимая на Firefox, кажется, соответствует blue-vertical полосе, отображаемой на Chrome.
Если это не ошибка браузера, что я должен сделать, чтобы сохранить исходное вертикальное выравнивание <span> после перемещения некоторых <span> элементов (1 или более)?
Используемый код JavaScript следующий
$(document).ready(function()
{
$('.unicode').attr('draggable', 'True');
$('.unicode').bind(
{
dragstart: function(ev)
{
eDraggable = ev.target;
}
,
dragenter: function(ev)
{
ev.preventDefault(); // needed for IE
ev.target.style.color = 'red';
}
,
dragover: function(ev)
{
ev.preventDefault(); // needed for IE
}
,
dragleave: function(ev)
{
ev.target.style.color = 'black';
}
,
drop: function(ev)
{
ev.target.style.color = 'orange';
ev.target.parentNode.insertBefore(eDraggable, ev.target.nextSibling);
}
});
});
.unicode
{
font-size: 32px;
cursor: pointer;
min-width: 60px;
padding: 2px;
display: inline-block;
text-align: center;
}
.unicode:hover
{
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<span class='unicode'>α</span>
<span class='unicode'>β</span>
<span class='unicode'>γ</span>
<span class='unicode'>δ</span>
<span class='unicode'>ε</span>
<span class='unicode'>ζ</span>
<span class='unicode'>η</span>
<span class='unicode'>θ</span>
<span class='unicode'>ι</span>
<span class='unicode'>κ</span>
<span class='unicode'>λ</span>
<span class='unicode'>μ</span>
<span class='unicode'>ν</span>
<span class='unicode'>ξ</span>
<span class='unicode'>ο</span>
<span class='unicode'>π</span>
<span class='unicode'>ρ</span>
<span class='unicode'>ς</span>
<span class='unicode'>σ</span>
<span class='unicode'>τ</span>
<span class='unicode'>υ</span>
<span class='unicode'>φ</span>
<span class='unicode'>χ</span>
<span class='unicode'>ψ</span>
<span class='unicode'>ω</span>
<span class='unicode'>Α</span>
<span class='unicode'>Β</span>
<span class='unicode'>Γ</span>
<span class='unicode'>Δ</span>
<span class='unicode'>Ε</span>
<span class='unicode'>Ζ</span>
<span class='unicode'>Η</span>
<span class='unicode'>Θ</span>
<span class='unicode'>Ι</span>
<span class='unicode'>Κ</span>
<span class='unicode'>Λ</span>
<span class='unicode'>Μ</span>
<span class='unicode'>Ν</span>
<span class='unicode'>Ξ</span>
<span class='unicode'>Ο</span>
<span class='unicode'>Π</span>
<span class='unicode'>Ρ</span>
<span class='unicode'>Σ</span>
<span class='unicode'>Τ</span>
<span class='unicode'>Υ</span>
<span class='unicode'>Φ</span>
<span class='unicode'>Χ</span>
<span class='unicode'>Ψ</span>
<span class='unicode'>Ω</span>
</div>
В последнюю минуту я изменил цвет шрифта упавшего <span>, чтобы облегчить анализ проблемы. Вы можете видеть, что только все символы всех строк без пропущенных символов <span> (все символы выделены черным цветом) продолжают выравниваться по вертикали.
I также заменил Unicode на простой символ 'X', чтобы быть уверенным, что эти проблемы не имеют ничего общего с Unicode.