요즘 나는 내 개인 웹사이트에서 일하면서 내 정보를 쿼리하기 위한 작은 터미널을 만들기로 결정했습니다. 내 개인 정보는 웹 사이트에서도 사용할 수 있지만 개발자의 개인 웹 사이트는 약간 괴상해야 합니다 :D. 웹사이트는 vuejs 및 bootstrap으로 빌드됩니다.

저는 디자인을 좋아하지 않는 사람이라 제 웹사이트가 세상에서 가장 예쁘지는 않겠지만 적어도 기능적으로는 만들려고 노력하고 있습니다. 사이트는 내 프로젝트(특히 파이썬 라이브러리)의 색인이 될 것이며, 이 작업 기간 동안 저장해 온 유용한 링크가 될 것입니다. 그리고 물론 이력서지만 마지막 부분이 될 것입니다.

구성 요소 구현

먼저 구성 요소를 구현해야 합니다. 헤더에서 컨테이너의 이동을 위임하는 구성 요소를 선택하고 'drag MouseDown' 기능을 이동하여 동작을 수정할 수 있습니다.

주형

구성 요소를 쉽게 사용자 정의할 수 있는 3개의 슬롯이 있는 정말 간단한 템플릿

스크립트

3가지 방법이 필요합니다.

끌기를 시작하려면 클릭하십시오. 이 메서드는 이동을 처리하기 위해 onmousemove 및 mouseup이라는 두 가지 함수를 등록합니다. 또한 컨테이너의 첫 번째 위치를 등록합니다.

onmousemove: 컨테이너의 위치를 ​​업데이트합니다.

mouseup: 함수 onmousemove 및 자체에 대한 함수 핸들러를 삭제합니다.

CSS

위치 절대값과 다른 페이지 구성 요소보다 높은 z-인덱스만 필요합니다.

드래그 가능한 div 구성요소

<template>
  <div ref="draggableContainer" id="draggable-container">
    <div id="draggable-header" @mousedown="dragMouseDown">
      <slot name="header"></slot>
    </div>
    <slot name="main"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
export default {
  name: 'DraggableDiv',
  data: function () {
    return {
      positions: {
        clientX: undefined,
        clientY: undefined,
        movementX: 0,
        movementY: 0
      }
    }
  },
  methods: {
    dragMouseDown: function (event) {
      event.preventDefault()
      // get the mouse cursor position at startup:
      this.positions.clientX = event.clientX
      this.positions.clientY = event.clientY
      document.onmousemove = this.elementDrag
      document.onmouseup = this.closeDragElement
    },
    elementDrag: function (event) {
      event.preventDefault()
      this.positions.movementX = this.positions.clientX - event.clientX
      this.positions.movementY = this.positions.clientY - event.clientY
      this.positions.clientX = event.clientX
      this.positions.clientY = event.clientY
      // set the element's new position:
      this.$refs.draggableContainer.style.top = (this.$refs.draggableContainer.offsetTop - this.positions.movementY) + 'px'
      this.$refs.draggableContainer.style.left = (this.$refs.draggableContainer.offsetLeft - this.positions.movementX) + 'px'
    },
    closeDragElement () {
      document.onmouseup = null
      document.onmousemove = null
    }
  }
}
</script>

<style>
#draggable-container {
  position: absolute;
  z-index: 9;
}
#draggable-header {
  z-index: 10;
}
</style>

구성요소 사용 예

슬롯이 있는 구성 요소는 속성 슬롯이 있는 태그 템플릿만 생성하면 됩니다. 슬롯 값은 대상 구성 요소가 됩니다.

주형

<template>
  <DraggableDiv class="col-11">
    <template slot="header">
      [[[ SOME CONTENT HERE]]]
    </template>
    <template slot="main" >
      [[[ SOME CONTENT HERE]]]
    </template>
    <template slot="footer">
      [[[ SOME CONTENT HERE]]]
    </template>
  </DraggableDiv>
</template>

스크립트

<script>
import DraggableDiv from './DraggableDiv'
export default {
  components: {
    DraggableDiv
  }
}
</script>

그게 다야

이 구성 요소를 사용하여 내 개인 웹 사이트에 대한 드래그 가능한 터미널을 구현했는데 결과는 다음과 같습니다.


자바스크립트에서 내 터미널 구현에 대한 게시물을 원하는 사람이 있다면 아래에 댓글을 남겨주세요 :D

참조

Drag and drop javascript

Vue named slots

Vue refs