The project address

Project address πŸ‘‰πŸ‘‰ Click to enter, you can directly set as the browser home page or desktop shortcut for use, I am using, long-term maintenance.

The source address

Completely open source, you can research, secondary development. Of course, you are still welcome to click Star⭐⭐⭐ πŸ‘‰ ⭐ source link (gitee) Source link (github) source link (Github)

Demand is introduced

Above is an open source I used to collect small projects, but at this stage only one by one in order to add url, the result is a problem, that is after adding a certain below, and if I added a new website, which are frequently used and the list is too long, into every time need to go to below, is so inconvenient.

Therefore, I want to add a drag-and-drop sorting function. In the edit mode, you can sort by dragging ICONS, exit the edit mode and save automatically, so as to solve the above problems and optimize the user experience.

The following is a detailed record of the implementation of this function.

HTML drag-and-drop interface

So let’s start with the API

The official introduction

The HTML Drag and Drop interface enables applications to use Drag and Drop functionality in the browser. For example, the user can use the mouse to select draggable elements, drag elements to droppable elements, and release mouse buttons to place those elements. During a drag operation, a translucent snapshot of the dragable element follows the mouse pointer.

Drag and drop event

There are seven drag events available, three of which are for drag elements

  • Dragstart is triggered when an element starts to be dragged
  • Dragend is triggered when the drag operation is complete
  • Drag is triggered when an element is dragged

Four are used to release areas

  • Dragenter is triggered when a dragged element enters the screen space occupied by the free area
  • Dragover is triggered when the dragged element moves within the release zone
  • Dragleave Fires when the dragged element leaves the release zone without dropping it
  • Drop is triggered when the dragged element is dropped in the release area

steps

  • First add to the element being draggeddraggableProperty and adddragstartEvent handler
  • Define drag and drop data, in this case for drag and drop elementsid
  • Define a release region, adddrop ε’Œ dragoverEvent handler function and block the default event
  • Process drag and drop data
  • Drag and drop end, adddragendEvent handler

example

code

<body>
  <div class="box" id='box1'>
    <div id="child" draggable="true"></div>
  </div>
  <div class="box" id='box2'>
  </div>
</body>
<script>
  ((doc) = > {
    const box1 = doc.querySelector("#box1")
    const box2 = doc.querySelector("#box2")
    const child = doc.querySelector("#child")
    // Bind the event function
    const bindEvents = () = > {
      child.addEventListener("drag", handleDrag)
      child.addEventListener("dragstart", handleDragstart)
      child.addEventListener("dragend", handleDragend)
      box2.addEventListener("dragenter", handleDragenter)
      box2.addEventListener("dragover", handleDragover)
      box2.addEventListener("dragleave", handleDragleave)
      box2.addEventListener("drop", handleDrop)
    };
    // Triggered when the element is dragged
    const handleDrag = (ev) = > {
      console.log('πŸš€πŸš€ ~ drag trigger ');
    }
    // Triggered when the element starts to be dragged
    const handleDragstart = (ev) = > {
      console.log('πŸš€πŸš€ ~ dragstart triggered ');
      ev.dataTransfer.setData('id', ev.target.id);
    }
    // Triggered when the drag operation is complete
    const handleDragend = (ev) = > {
      console.log('πŸš€πŸš€ ~ dragend triggered ');
    }
    Emitted when the dragged element enters the screen space occupied by the free area
    const handleDragenter = (ev) = > {
      console.log('πŸš€πŸš€ ~ dragenter triggered ');
    }
    Emitted when the dragged element moves within the release zone
    const handleDragover = (ev) = > {
      ev.preventDefault();
      console.log('πŸš€πŸš€ ~ dragover triggered ');
    }
    Emitted when the dragged element leaves the release zone without dropping it
    const handleDragleave = (ev) = > {
      console.log('πŸš€πŸš€ ~ dragleave triggered ');
    }
    // Triggered when the dragged element is dropped in the release area
    const handleDrop = (ev) = > {
      console.log('πŸš€πŸš€ ~ drop triggered ');
      ev.preventDefault();
      const data = ev.dataTransfer.getData("id");
      ev.target.appendChild(document.getElementById(data));
    }

    // Initialize the function
    const init = () = > {
      bindEvents();
    };
    // Execute the initialization functioninit(); }) (document);
</script>
Copy the code

The implementation idea in VUE3

I haven’t worked on drag sorting in native JS yet, but in VUE it is very simple because we can get the index of an element when we trigger any event, and we can do this easily with index.

  • indragstartTo record the old index
  • indragoverA new index is recorded in the index, which is updated each time it passes
  • indropEvent to process the array, delete the old elements, and add new elements to the target index
// After the brief pseudo code details please see the source code
<div draggable="true" v-for='(item,index) in markList' :key='index' 
@dragstart="handleDragstart(index)" 
@drop.prevent="handleDrop()"
@dragover.prevent="handleDragover(index)">
</div>


//js
const state = reactive<MarkState>({
  // Index of the element currently being dragged
  oldItemIndex: -1.// Index of the target location to be inserted
  newItemIndex: -1});// triggered when the drag starts
const handleDragstart = (index: number) = > {
  state.oldItemIndex = index;
};
// Triggered when drag stops
const handleDrop = () = > {
  // Do nothing if the position does not change
  if (state.newItemIndex === state.oldItemIndex) {
    return;
  }
  // If the position is changed
  emit('change-mark-index', state.oldItemIndex, state.newItemIndex);
};
// Triggered when drag passes other elements
const handleDragover = (index: number) = > {
  state.newItemIndex = index;
};


//change-mark-index
// Change the bookmark index
const changeMarkIndex = (oldItemIndex: number, newItemIndex: number) = > {
  // Delete the old
  const changeItem = marks.value.splice(oldItemIndex, 1) [0];
  // Add a new target location to the list
  marks.value.splice(newItemIndex, 0, changeItem);
};
Copy the code

Finally realize

The next development plan

πŸ’‘ There will be a location prompt when you drag it to the target location

πŸ’‘ supports drag and drop to other tabs

πŸ’‘ Add drag animation

If you have any ideas or suggestions, please feel free to comment or send me a message below. Thank you very much πŸ™πŸ™πŸ™.

Finally, thank you for your patience to watch, since we are here, click πŸ‘ and then go

Links to integrate

πŸ”Š Project preview address (GitHub Pages):πŸ‘‰πŸ‘‰alanhzw.github. IO

πŸ”Š Project preview alternate address (own server):πŸ‘‰πŸ‘‰warbler.duwanyu.com

πŸ”Š source code address (gitee):πŸ‘‰πŸ‘‰gitee.com/hzw_0174/wa…

πŸ”Š source address (github):πŸ‘‰πŸ‘‰github.com/alanhzw/War…

πŸ”Š My blog :πŸ‘‰πŸ‘‰www.duwanyu.com