HTMLドラッグ＆ドロップコード

from turtle import *
from random import *
from math import *

def tree(n,l):
    pd()#downstroke
    # shading effect
    t = cos(radians(shading()+45))/8+0.25
    pencolor(t,t,t)
    pensize(n/3)
    forward(l)#draw the branch

    if n>0:
        b = random()*15+10 #right branch deflection angle
        c = random()*15+10 #left branch deflection angle
        d = l*(random()*0.25+0.7) #the length of the next branch
        # right angle, draw right branch
        right(b)
        tree(n-1,d)
        #Turn left by a certain angle and draw the left branch
        left(b+c)
        tree(n-1,d)
        #Turn back
        right(c)
    else:
        #draw the leaves
        right(90)
        n=cos(radians(drawing()-45))/4+0.5
        pencolor(n,n*0.8,n*0.8)
        circle(3)
        left(90)
        #Add 0.3 times the number of falling leaves
        if(random()>0.7):
            pu()
            #drift down
            t = heading()
            an = -40 +random()*40
            setheading(an)
            dis = int(800*random()*0.5 + 400*random()*0.3 + 200*random()*0.2)
            forward(dis)
            setheading(t)
            #draw the leaves
            pd()
            right(90)
            n = cos(radians(heading()-45))/4+0.5
            pencolor(n*0.5+0.5,0.4+n*0.4,0.4+n*0.4)
            circle(2)
            left(90)
            pu()
            # return
            t=heading()
            setheading(an)
            backward(dis)
            setheading(t)
    pu()
    backward(l)#return

bgcolor(0.5,0.5,0.5)#background color
ht()#hide turtle
speed(0)#speed 1-10 progressive, 0 fastest
tracer(0,0)
pu()#raise pen
backward(100)
left(90)#turn left 90 degrees
pu()#raise pen
backward(300)#backward300
tree(12,100)#recursive 7 levels
done()

from turtle import *
from random import *
from math import *

def tree(n, l):
    pd()
    t = cos(radians(heading() + 45)) / 8 + 0.25
    pencolor(t, t, t)
    pensize(n / 4)
    forward(l)
    if n > 0:
        b = random() * 15 + 10
        c = random() * 15 + 10
        d = l * (random() * 0.35 + 0.6)
        right(b)
        tree(n - 1, d)
        left(b + c)
        tree(n - 1, d)
        right(c)
    else:
        right(90)
        n = cos(radians(heading() - 45)) / 4 + 0.5
        pencolor(n, n, n)
        circle(2)
        left(90)
    pu()
    backward(l)
bgcolor(0.5, 0.5, 0.5)
ht()
speed(0)
tracer(0, 0)
left(90)
pu()
backward(300)
tree(13, 100)
done()

/*
* Get the top and left positions of the child container relative to the parent container when the child container is created
*
mounted () {
  this.left = this.$refs.fatherBox.offsetLeft
  this.top = this.$refs.fatherBox.offsetTop
}

/*
* When the mouse is pressed
* 1. turn on the flag that allows the child container to move
* 2. record information about the position of the mouse when it is clicked
*
mouseDown (e) {
  // Set the flag to allow the popup window to move
  this.moveFlag = true
  // Save the start position of the mouse
  this.startLeft = e.clientX - this.left
  this.startTop = e.clientY - this.top
}

/*
* When the mouse moves
* 1. determine if the flag allows the child container to move
* 2. set the left position of the popup box
* 3. set the right position of the popup box
*
move (e) {
  // Determine if the flag is allowed to move
  if (!this.moveFlag) return

  // Set the left position of the popup box
  this.left = e.clientX - this.startLeft
  // Set the right position of the popup box
  this.top = e.clientY - this.startTop

}

/*
* When the mouse button pops up
* 1. turn off the flag that allows the child container to move
*
mouseUp (e) {
  this.flag = false
}

/*
* Parent component code snippet jsx version
*
export default {
  props: {
    playList: {
      type: Array,
      required: true
    }
  },
  render () {
    return (
      <div style={{width: '100%', height: '100%'}} ref={'father'}>
        {
          this.playList && this.playList.map((item, index) => {
            return (
              <ChildComponents
                key={index}
                ref={index}
                zIndex={index}
                visible={true}
                backValue={this.backValue}
                info={item}
                width={600}
                height={400}
              />
            )
          })
        }
      </div>
    )
  },
  methods: {
    backValue (left, top, zIndex) {
      this.$refs[zIndex]. $el.style.top = `${top}px`
      this.$refs[zIndex]. $el.style.left = `${left}px`
    }
  }
}

<! -- Parent component code snippet vue file version -->

<template>
  <div
    ref="father"
    style"width: 100%, height: 100%"
  >
    <ChildComponents
      v-for="(item, index) in playList"
      :key="index"
      :ref="index"
      :visible="true"
      :z-index="index"
      :back-value="backValue"
      :info="item"
      :close="close"
      :width="600"
      :height="400"
    />
  </div>
</template>
<script>
export default {
  components: {
    VideoPlayerModal
  },
  props: {
    playList: {
      type: Array,
      required: true
    }
  },
  methods: {
    backValue (left, top, zIndex) {
      this.$refs[zIndex][0]. $el.style.top = `${top}px`
      this.$refs[zIndex][0]. $el.style.left = `${left}px`
    }
  }
}
</script>

/* 1.
* 1. this.width data is the width value passed in by the parent component, or the default value set by the child component itself
* 2. this.height data is the height value passed in by the parent component, or the default value set by the child component itself
*
move (e) {
  // determine if the flag allows movement
  if (!this.moveFlag) return

  // Determine if the left view is exceeded
      if (this.$refs.fatherBox.offsetLeft < this.width / 2) {
        // disable popup box movement
        this.moveFlag = false
        // Set the left position of the popup box
        this.left = this.width / 2 + 10
        // call the callback function to expose the offset to the parent component
        this.backValue(this.left, this.top, this.zIndex)
        return
      }

      // Determine if the right view is exceeded
      if (this.$refs.fatherBox.offsetLeft > document.body.clientWidth - this.width / 2) {
        // disable popup box movement
        this.moveFlag = false
        // Set the position of the right side of the popup box
        this.left = document.body.clientWidth - this.width / 2 - 10
        // call the callback function to expose the offset to the parent component
        this.backValue(this.left, this.top, this.zIndex)
        return
      }

      // Determine if the top view is exceeded
      if (this.$refs.fatherBox.offsetTop < this.height / 2 + 70) {
        // disable popup box movement
        this.moveFlag = false
        // Set the top position of the popup box
        this.top = this.height / 2 + 70 + 10
        // call the callback function to expose the offset to the parent component
        this.backValue(this.left, this.top, this.zIndex)
        return
      }

      // Determine if the bottom view is exceeded
      if (this.$refs.fatherBox.offsetTop > document.body.clientHeight - this.height / 2 - 50) {
        // disable popup box movement
        this.moveFlag = false
        // Set the bottom position of the popup box
        this.top = document.body.clientHeight - this.height / 2 - 50 - 10
        // call the callback function to expose the offset to the parent component
        this.backValue(this.left, this.top, this.zIndex)
        return
      }

      // Set the left position of the popup box
      this.left = e.clientX - this.startLeft
      // Set the right position of the popup box
      this.top = e.clientY - this.startTop

      // call the callback function to expose the offset to the parent component
      this.backValue(this.left, this.top, this.zIndex)
}

mouseOut (e) {
  this.moveFlag = false
}