# 乾貨大平台

## html

- Youtube 內嵌播放清單的方式：(把 list = 後面的 id 改成播放清單的 id)

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/videoseries?list=LIST_ID"
  frameborder="0"
  allow="autoplay; encrypted-media"
  allowfullscreen>
</iframe>

## css

## Javascript

- 複製某個區塊的文字(不使用套件)

const tempDOMTextArea = document.createElement('textarea');

document.body.appendChild(tempDOMTextArea);
tempDOMTextArea.value = 'Text YOU WANT TO COPIED';
tempDOMTextArea.select();
document.execCommand('copy');
document.body.removeChild(tempDOMTextArea);

- 水平滾動視窗，因為滑鼠要水平滾動需要使用 shift + 滾輪，很多 user 不會用，所以可能會加上 click and drag 的效果如下：

useEffect(() => {
    const node = document.getElementById('article-suggestion-scroller');
    const wrapper = document.getElementById('article-suggestion-wrapper');
    let startX = 0;
    let startScrollLeft = 0;

    function mousemove(evt) {
      wrapper.style.pointerEvents = 'none';
      node.scrollLeft = startScrollLeft + (startX - (evt.pageX - node.offsetLeft));
    }

    function mouseup() {
      node.style.cursor = 'grab';
      wrapper.style.pointerEvents = 'auto';
      node.removeEventListener('mousemove', mousemove);
    }

    function mousedown(evt) {
      startX = evt.pageX - node.offsetLeft;
      startScrollLeft = node.scrollLeft;

      node.style.cursor = 'grabbing';
      node.addEventListener('mousemove', mousemove);
    }

    if (node) {
      node.addEventListener('mousedown', mousedown);
      node.addEventListener('mouseup', mouseup);

      return () => {
        node.removeEventListener('mousedown', mousedown);
        node.removeEventListener('mouseup', mouseup);
      };
    }

    return () => {
      startX = 0;
      startScrollLeft = 0;
    };
  }, []);

<div id="article-suggestion-scroller" className="scroller">
  <div id="article-suggestion-wrapper" className="wrapper">
  </div>
</div>

- 要做 Draggable text 拖拉文字到 textarea 中的話，只需要在「要拖曳的文字」上增加 onDragStart => 然後給下面這段就行了

ev.dataTransfer.setData('text/plain', value);

ev.dataTransfer.effectAllowed = 'copy';

###### tags: `javascript`