Question

现在，我对拖放功能感兴趣，我可以在其中移动卡片和图表，它们应该自行排列。这个Codepen示例显示了我需要完成的功能： enter code here 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盒。

当我动态添加项目时，它们按添加的顺序排列。我的主要“容器”可以将1960x1080分辨率的2张图表并排放置。这意味着1行6线规。

image of correctly arranged divs

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

image of incorrectly arranged divs - after deleting some order is lost 有比示例更好的拖放方法吗？它的功能就像我想要的。还有什么是保存页面外观的好方法？现在，我有一些类，其中包含有关已创建项目的相关信息（显示的数据，最小值和最大值，量规颜色等）。我序列化这些类，并将它们发送到sql数据库。当有人随机连接到此应用程序时，它将读取此配置，对其进行反序列化，并根据这些类的数组创建html元素。在我不得不添加不同大小的图表之前，它一直以这种方式完美地工作。这是从db加载配置并创建所有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组合。

很酷的项目，我希望看到结果，或者如果可以的话，可以提供更多帮助。

推荐在容器内重新排列div并保存新视图的方法

1 个答案: