dat.GUI自定义放置未显示

Question

因此，我试图使用自定义布局教程在画布右上角放置一个dat.GUI：

下面是一个代码库，显示不工作的自定义位置：http://codepen.io/eternalminerals/pen/avZBOr

我试图使用自定义放置属性，因为此页上的自动放置dai.GUI是不可单击的。我想，如果我自定义把它放在画布上而不是页面上，它应该能工作。

我试过：

var gui = new dat.GUI({ autoPlace: false });

var customContainer = document.getElementById('my-gui-container');
customContainer.appendChild(gui.domElement);

在代码页和活动站点上，“My-Gui-容器”都是“画布”，但是每当我这样做时，dat.GUI就完全消失了。也许我得把帆布包起来？我将继续修补这个dat.GUI，并随时通知您。

谢谢。

Answer 1

这是一个重复的问题：How do I change the location of the dat.gui dropdown?

我只使用moveGui div，并将dat.GUI附加到moveGui div，并使用CSS移动它。代码现在正在工作！！http://codepen.io/eternalminerals/pen/avZBOr

html：

<canvas id="canvas"></canvas>
<div  class = 'moveGUI'>
</div>

css：

.moveGUI{ 
    position: absolute;
    top: 13.1em;
    right: -1em;
}

联署材料：

var FizzyText = function() {
  this.message = 'dat.gui';
  this.speed = 0.8;
  this.displayOutline = false;
  this.explode = function() { console.log('test'); };
  // Define render logic ...
};

$(document).ready(function( $ ) {
  var text = new FizzyText();
  var gui = new dat.GUI({ autoPlace: false });
  gui.add(text, 'message');
  gui.add(text, 'speed', -5, 5);
  gui.add(text, 'displayOutline');
  gui.add(text, 'explode');
  gui.domElement.id = 'canvas';
  var customContainer = $('.moveGUI').append($(gui.domElement));
});