在HTML div上，如何在多次拖放操作后保持跨度的垂直对齐？

Question

我已经开发了一个Javascript程序（下面的代码），以拖放一些包含（希腊语）字符并包含在简单的<span>元素中的<div>元素。

第一次正确显示页面；所有字符都是aligned verticalally >>。

我可以增大或减小Window的高度或宽度，并且所有角色继续垂直对齐。

我可以使用标准<div>新JavaScript API在drag and drop中移动字符。

但是出了点问题。垂直对齐方式开始丢失！

移动10个或更多之后，我看到以下结果

通常，blue-vertical条不可见，但在某些情况下会突然出现。不是错误，仅是我现在用来解释会发生什么的特征。

我在Opera，Chrome，Edge Chromium和Firefox的最新版本（2020）上具有相同的结果。

[在Firefox上，当我检查元素时，在space-text中的所有<span>之间显示一个<div>区域。每次移动后，将删除掉落在space-text和<span>目标（已拖放可拖动<span>的<span>）之间的<span>区域！

在Firefox上可见的space-text区域似乎与Chrome上显示的blue-vertical条相对应。

如果这不是浏览器的错误，在移动一些<span>元素（1个或更多）后，我该怎么做才能保持<span>的原始垂直对齐？

以下使用的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'>&#x03B1;</span>
  <span class='unicode'>&#x03B2;</span>
  <span class='unicode'>&#x03B3;</span>
  <span class='unicode'>&#x03B4;</span>
  <span class='unicode'>&#x03B5;</span>
  <span class='unicode'>&#x03B6;</span>
  <span class='unicode'>&#x03B7;</span>
  <span class='unicode'>&#x03B8;</span>
  <span class='unicode'>&#x03B9;</span>
  <span class='unicode'>&#x03BA;</span>
  <span class='unicode'>&#x03BB;</span>
  <span class='unicode'>&#x03BC;</span>
  <span class='unicode'>&#x03BD;</span>
  <span class='unicode'>&#x03BE;</span>
  <span class='unicode'>&#x03BF;</span>
  <span class='unicode'>&#x03C0;</span>
  <span class='unicode'>&#x03C1;</span>
  <span class='unicode'>&#x03C2;</span>
  <span class='unicode'>&#x03C3;</span>
  <span class='unicode'>&#x03C4;</span>
  <span class='unicode'>&#x03C5;</span>
  <span class='unicode'>&#x03C6;</span>
  <span class='unicode'>&#x03C7;</span>
  <span class='unicode'>&#x03C8;</span>
  <span class='unicode'>&#x03C9;</span>
  <span class='unicode'>&#x0391;</span>
  <span class='unicode'>&#x0392;</span>
  <span class='unicode'>&#x0393;</span>
  <span class='unicode'>&#x0394;</span>
  <span class='unicode'>&#x0395;</span>
  <span class='unicode'>&#x0396;</span>
  <span class='unicode'>&#x0397;</span>
  <span class='unicode'>&#x0398;</span>
  <span class='unicode'>&#x0399;</span>
  <span class='unicode'>&#x039A;</span>
  <span class='unicode'>&#x039B;</span>
  <span class='unicode'>&#x039C;</span>
  <span class='unicode'>&#x039D;</span>
  <span class='unicode'>&#x039E;</span>
  <span class='unicode'>&#x039F;</span>
  <span class='unicode'>&#x03A0;</span>
  <span class='unicode'>&#x03A1;</span>
  <span class='unicode'>&#x03A3;</span>
  <span class='unicode'>&#x03A4;</span>
  <span class='unicode'>&#x03A5;</span>
  <span class='unicode'>&#x03A6;</span>
  <span class='unicode'>&#x03A7;</span>
  <span class='unicode'>&#x03A8;</span>
  <span class='unicode'>&#x03A9;</span>
</div>

[在最后一分钟，我已更改掉的字体颜色为<span>，以便于分析问题。您可以看到，只有所有行中没有掉落的<span>（所有字符均为黑色）的所有字符仍继续垂直对齐。

我还用一个简单的'X'字符替换了Unicode，以确保此问题与Unicode无关。

我已经开发了一个Javascript程序（下面的代码）来拖放一些包含（希腊）字符的元素，并包含在简单的

元素中。第一次进入页面...

Answer 1

首先，它不是错误，但是要理解它非常棘手。

每个Unicode字符包含在<span>中。为了在Notepad ++上读取HTML文件，我生成了一个文件，其中每个<span>都位于这样的一行上