jquery - 在容器内重新排列 div 并保存新 View 的推荐方法

Question

现在，我对拖放功能很感兴趣，我可以在其中四处移动我的卡片和图表，它们应该会自行排列。这个代码笔示例显示了我需要完成的功能: 在此输入代码 https://codepen.io/therealDaze/pen/ZaoErp

动态添加元素的相关代码:

interface Config {
  id: string;
  measurement: string;
  min: number;
  max: number;
}

gaugeConfigs[]:Config=[];

addGauge(config:Config){
    var container = document.getElementById("container");
    var divbox = document.createElement("div");
    var div = document.createElement("div");
    //some code regarding adding the gauge inside the box itself
    divbox.className = 'boxvalue';
    div.className = 'gauge-container normal';
    container.appendChild(divbox);
    divbox.appendChild(div);
 }

'boxvalue' 的 css 是

div.boxvalue {
    border-style: solid;
    background-color: rgb(248, 247, 247);
    border-radius: 1px;
    width: 240px;
    height: 200px;
    float: left;
    margin: 0.5%;
}

现在我在这个 div 中添加了 Gauge(来自 svg-gauge)，它按预期显示了我的数据。与我对图表 (charts.js) 的处理方式相同，它也有效。请注意，图表容器更大，尺寸与这些仪表的 2x3 盒完全一样。

当我动态添加元素时，它们按添加的方式排列。我的主要“容器”可以容纳 2 个并排的 1960x1080 分辨率图表。这意味着 1 排 6 个仪表。

image of correctly arranged divs

如果我随机添加这些，它们不会排列，我想拖动一些直到它们符合合适的顺序。我可以通过删除一些并重新添加它们来做到这一点，但这不是一个好的解决方案。

image of incorrectly arranged divs - after deleting some order is lost 有没有比示例更好的拖放方法？它的功能正如我所愿。还有什么是保存页面外观的好方法？现在我有一些类，其中包含有关已创建元素的相关信息(它显示的数据、最小值和最大值、仪表颜色等)。我序列化这些类并将它们发送到 sql 数据库。 当有人随机连接到这个应用程序时，它会读取这个配置，反序列化它，并根据这些类的数组创建 html 元素。在我不得不添加不同大小的图表之前，它一直以这种方式完美运行。 这是从数据库加载配置并创建所有div的函数

  loadFromDb() {
    this.gaugeConfigs.length = 0; //reset the global configs array
    var observable = this.http.get(this.baseUrl + 'api/Pages/Load');
    observable.subscribe(result => {
      if (result != null) {
        this.gaugeConfigs = JSON.parse(JSON.stringify(result));
        for (var i = 0; i < this.gaugeConfigs.length; i++) {
          this.addGauge(this.gaugeConfigs[i]);//calls the function for every class
        }
      }          
    });
  }

希望我说得足够清楚

Answer 1

我查看了 Codepen JS，它都是 DOM 操作。我会为此功能创建一个指令或一个包含的组件以供重用和在 StackBlitz 中使用。

Angular 希望我们使用 ElementRef 来获取对 DOM 的引用。喜欢这个事件监听器(您需要)。

@HostListener('document:click', ['$event']) onClick(event: MouseEvent) {
    if (this.eRef.nativeElement.parentNode.parentNode.contains(event.target)) { 
        // click inside component
        this.active = true;
    } else { // click outside component
        this.active = false;
        this.arrow = -1; // reset
    }
}
...
constructor(private eRef: ElementRef) {}

我设置了 StackBlitz for my own reference that may help you and others here .

接下来是 DOM 操作；推荐使用 Renderer2。 这是一个很棒的Alligator.io article for both methods合并。

很棒的元素，我很乐意看到结果，或者如果可以的话，我会提供更多帮助。