draggable() 1 - p5.js v1.9.0 study

/*

 * draggable()

 * https://p5js.org/reference/#/p5.Element/draggable

 */

​

let count = 0;

​

function setup() {

  createCanvas(100, 100);

  background(100);

  const toolBoxDiv = createDiv().style('background', 'white')

                                .size(150,200)

                                .position(windowWidth/2, windowHeight/2)

                                .style('display', 'flex')

                                .style('justify-content', 'center')

                                .style('align-items', 'center')

                                .style('flex-direction', 'column')

                                .style('padding', '10px 10px')

                                .draggable();

  const header = createElement('h3', 'Tool Box').parent(toolBoxDiv);

  const note = createDiv('You can move this box by dragging.').size(150,50).parent(toolBoxDiv);

  const plusButton = createButton('+1').parent(toolBoxDiv)

                                                 .mousePressed(() => {

                                                   count++;

                                                 })

  const minusButton = createButton('-1').parent(toolBoxDiv)

                                               .mousePressed(() => {

                                                 count--;

                                               })

​

}

​

function draw() {

  background("#cccccc")

  textSize(32);

  fill("white");

  stroke("gray");

  strokeWeight(2);

  text(count, (width-textWidth(count))/2, (height)/2)

}