Как создать перетаскиваемый веб-компонент - PullRequest
Новая
       7

Как создать перетаскиваемый веб-компонент

0 голосов
/ 13 января 2020

Итак, одно из моих заданий - создать окно, в которое я смогу добавлять различные приложения. Само окно более или менее готово, и я пытаюсь сделать компонент перетаскиваемым.

Я считаю, что большая часть этого выполнена и фактически работает. В консоли я вижу, что позиции X и Y на самом деле меняются при перемещении мыши, однако само окно не перемещается.

Я считаю, что это из-за того, что pos3 и pos4 никогда не получают значение, они оба не определены, и я понятия не имею, что я сделал неправильно. Я надеюсь, что вы, ребята, понимаете, что я преследую, и можете указать мне правильное направление.

Fiddle: https://jsfiddle.net/wLx2qgu0/

Это мой код с некоторыми плохими именование переменных: 


const template = document.createElement('template')
template.innerHTML = `

<div id="container">
  <h1 id="mover">
  <span class="dot" style="background:#ED594A;"></span></h1>
  <!-- <chat-board></chat-board> -->
</div>
<!--container end-->


<style>

  .dot {
  margin-top: 4px;
  height: 12px;
  width: 12px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

    #container {
  height: 525px;
  width: 360px;
  margin: 100px auto;
  background: #f7f7f7;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  position: absolute;
  z-index: 9;


}

#mover {
  background: #1F030C;
  color: white;
  margin: 0;
  padding: 10px 100px;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: normal;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  cursor: move;
  z-index: 10;

}

    </style>
`

class Window extends window.HTMLElement {
  constructor () {
    super()

    this.attachShadow({ mode: 'open' })
    this.shadowRoot.appendChild(template.content.cloneNode(true))
    this.pos1 = this.pos1 || 0
    this.pos2 = this.pos2 || 0
    this.pos3 = this.pos3 || 0
    this.pos4 = this.pos4 || 0
    this.mover = this.shadowRoot.querySelector('#mover')
    this.cont = this.shadowRoot.querySelector('#container')
  }

  connectedCallback () {
    this.dragElement(this.cont)
  }

  dragElement (event) {
    this.mover.addEventListener('mousedown', (e) => {
      this.sender(event)
    })
  }

  elementDrag (event) {

    event = event || window.event
    this.moveWindow(event.clientX, event.clientY)
  }

  moveWindow (x, y) {
    this.pos1 = this.pos3 - x
    this.pos2 = this.pos4 - y
    this.pos3 = x
    this.pos4 = y
    this.style.top = this.offsetTop - this.pos2 + 'px'
    this.style.left = this.offsetLeft - this.pos1 + 'px'

  }

  closeDragElement () {
    /* stop moving when mouse button is released: */

    document.onmouseup = null
    document.onmousemove = null
  }

  // Events
  sender (event) {
    event = event || window.event
    this.pos3 = event.clientX
    this.pos4 = event.clientY
    console.log(this.pos3)
    document.onmouseup = this.closeDragElement
    document.onmousemove = this.elementDrag.bind(this)
  }
}

window.customElements.define('window-board', Window)

1 Ответ

1 голос
/ 13 января 2020

Отметьте это https://jsfiddle.net/0n4skL3r/

  1. Вам необходимо добавить стили к своим теневым элементам внутри скрипта
  2. Вызвать this.dragElement() функцию, чтобы прикрепить mousedown событие. Я сделал это в конструкторе.
...