• “This article has participated in the call for good writing activities, click to view: the back end, the big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!”

preface

  • Doing front-end development for so long, you’re rightJavaScriptHow much do you know about native events? How is it possible to play video in full/out of full screen, drag and drop files to upload, adjust the width and height of containers, adjust the left and right container widths, and so on? Below I do a simple introduction for the above several functions, shortcomings also hope to point out.
  • Detanx Github

Full screen/Exit full screen

  • In some cases, when we want to see only one part of the page due to a large amount of content, we can add a full-screen button to that part of the page to show only that part of the content.
  • Note: Full screen events are indocument.documentElementObject, while exiting the full screen event is indocumentOn the object.

  • When setting the style in different states (not limited to width and height), we can modify the differentclassTo control, inVue 、 ReactEtc. We can also control variables to change the elements in different statesclass 。
  • How to remember these event names:
    1. Full screen event

      Source:document.documentElement;

      Method name: Standard method -:requestFullscreen, other methods -: capital standard methodrequestFullscreenIs prefixed with the first letter ofwebkit,moz,ms).
    2. Exit the full-screen event

      Source:document;

      Method name: Standard method -:exitFullscreen.IE-: uppercase standard methodexitFullscreenThe first letter of “and prefixedms;Chrome (its),Firefox (moz)– :CancelFullScreenAdd the corresponding kernel prefix.

File drag upload

  • File uploads are used in many places, half of them by clicking on a button or area to select file uploads, but other places use drag-and-drop file uploads, or both.

Drag and drop event

  • In file drag-and-drop, we’re going to use thatondragover,ondragenter,ondragleave,ondropThese events.

The specific implementation

  1. Create a drag-and-drop area to accept files and a progress bar to read files

2. Listen for the drag event on the web page and display the corresponding file to be dragged to the area, if the drag area is always displayed, you can directly tie the event to the corresponding area element.

3. Triggered when a drag file has entered the drag areaondragenter.4. Triggered when a drag file leaves the drag areaondragleave.5. Triggered when a drag file is released in the drag areaondropEvent, when the file being dragged is not some unreadable content (e.g. folder, etc.), we can use the built-inFileReaderObject processing, passFileReaderInstance of some methods, we can do some of our own processing.

Drag and drop to changedivThe size of the

  • In some projects, there may be a requirement that the page has a container and we can change the height of the container by holding down the edge and dragging the mousetextareaOf the labelresizeAttribute); Of course we certainly have more than this simple function when the page exists left and rightdivWhen, we can drag twodivIn the middle, make twodivOne increases the width of the other decreases, but always keeps the total width the same.

Create a container

Listen for mouse movement events

  • Get the position of the mouse, determine whether it is inside the container, determine the location of the container when it is inside.

  • resizeable: Whether the mouse-down area is defined to change the size of the container;
  • clientX,clientY: record the coordinates of the mouse, also used to store the coordinates of the mouse last time;
  • minW,minH,direc: Minimum width, height and change direction of the container.

  • CSS 的 cursorProperty allows you to set the mouse to be displayed at different locations of the container, informing the user of the actions that can be performed by the container.

  • More CURSOR properties.

Listen for mouse press events

  • Mouse-down events should be added to containers to avoid triggering events in non-container areas.

Listen for mouse release events

  • The release event should be bound to the entire document object. If it is bound to the container, when the mouse is pressed over the container, we will move the mouse out of the container, and the release event will not occur.

A two-column mutable container

  • throughflexLayout, we add a two-column, and set a region in the middle where you can click to change the width of the container on both sides of the version. After pressing the region with the mouse, change the width of the left and right containers by obtaining the position of the mouse.
  • The concrete implementation is as follows:
  1. Create the required container structure

  1. throughCSSAdjust the layout accordingly

  1. Add drag events to resize
  • Depending on where the container is, the variable inside the containerdivThe size calculation may also be somewhat different, for example, if the container existspaddingPhi, and then you have to subtract the corresponding phipxSize and so on.
  • The mouse may move out of the click-drag area during drag, so the release event (onmouseup) need to bind todocumentOn.

Past wonderful

  • JavaScript judges elegant writing
  • Build from 0 Vite + Vue3 + element-plus + VUE-Router + ESLint + husky + Lint-staged
  • “Front-end advanced” JavaScript handwriting methods/use tips self-check
  • An introduction to JavaScript design patterns and creative patterns
  • Public account open small program best solution (Vue)
  • Axios you probably don’t know how to use

“Likes, favorites and comments”

❤️ follow + like + favorites + comments + forward ❤️, creation is not easy, encourage the author to create a better article, thank 🙏 everyone.