Why was the Html5 Drag Api abandoned

  • I also used the Drag Api to write a draggable component, which was a bit awkward to use.
  • Let’s start with a similar Drag UI component from Uzan, which references the SorTableJS library that encapsulates the Drag Api

  • 1. When dragging, follow the shadow of the mouse to become ghost, which is automatically generated by Api. But because this is a very clean page, with a white background it’s really hard to see where it’s going when you drag it. Although Api provides e.d ataTransfer. SetDragImage (img, 0, 0) method, let us in to change the ghost, but set the img element must be HTML img element, HTML canvas, Otherwise it must be a visible node. Simply put, if your ghost is not a Canvas or IMG element, but your custom HTML element, you must append it to the document.
    document.getElementById("drag-with-create-add").addEventListener("dragstart", function(e) {
        var crt = this.cloneNode(true);
        crt.style.backgroundColor = "red";
        document.body.appendChild(crt);
        e.dataTransfer.setDragImage(crt, 0, 0);
    }, false);Copy the code
  • This way seems to solve the problem of drag is not obvious, but the set of Ghost is a default transparency, and you have no way to change the transparency. In the page shown above, even a cloneNode element following the mouse is somewhat unclear for this reason.
  • 2. Elements are constantly reflow and redraw when you drag quickly

  • As you can see from the above figure, the DOM order is constantly changing during drag-and-drop sorting. Although this overhead doesn’t matter much when the page is already loaded at the time of the drag-and-drop sorting, it would be nice to be able to change the DOM structure only once in a single drag.
  • 3, the example of drag and drop without animation effect, and ghost follow gives a feeling of a very hard to drag, a little laborious. This is not a quibble, and will be reflected later in the draggable component animation.

Use mouse events to drag and drop more smoothly

  • The optimized drag-and-drop is obviously much smoother than the example, and doesn’t feel like a drag drag.

  • Translate does not change the STRUCTURE of the DOM. Instead, translate does not backflow or redraw, but does an update sort at the end of a drag. The element being dragged is also obvious as you drag it.
  • For details on how CSS affects document flow reflux and redrawing, see docs.google.com/sprea…

Optimization idea

  • Discard HTML5 drag in favor of mouse events
  • Clone the current clicked element to ghost while mousedown and visibility:hidden; Visibility, which allows the original element to remain in place, is key to not changing the DOM during drags.
  • Set ghost’s position to Fixed, out of the document flow, so that no matter how much drag and drop will not affect the layout.
  • Add the Mousemove and Mouseend events to the window so that ghost will follow no matter how the mouse moves. While mousemove determines the position of ghost and other elements, only translate is used to change it, and the sorting is not done until the drag is complete.
  • Custom ghost is optimized so that moving elements can be clearly seen.

With vue use source: github.com/sally2015/…. Easily bind data lists bidirectionally through v-Model