Suggestion: reorder handlers in the DOM tree after any handler modiciation

[ne0t3ric]

Suggestion

When a handler is added or moved, it would be more convenient to have its matching DOM element in the correct order.

Why ?

It's more convenient to apply styles or js code to specific handlers using selector, (for example: grp-handler:first-child or grp-handler:last-child).

Example

Starting with two handlers (extreme left and right)

<div class="grp-preview">
  <div class="grp-handler" style="position: absolute; top: 0px; left: 0%;">
      ....
    </div>
   <div class="grp-handler" style="position: absolute; top: 0px; left: 100%;">
      ...
   </div>
</div>

If we add another handler, it will become :

<div class="grp-preview">
  <div class="grp-handler" style="position: absolute; top: 0px; left: 0%;">
      ....
    </div>
   <div class="grp-handler" style="position: absolute; top: 0px; left: 100%;">
      ...
   </div>
   <div class="grp-handler" style="position: absolute; top: 0px; left: 28%;">
      ...
   </div>
</div>

If I want to apply a style to the extremes handlers, I can't use styles :

.grp-handler:first-child, .grp-handler:last-child {
   width: 10px;
   background-color: red;
}

Proposal

In Handler class, modify setPosition to replace in the dom (using this.gp.handlers information)

Contribution

If the feature request is accepted, I could make a pull request as a contribution