Say the steps to implement the drag-and-drop function:

1. Set the item you want to drag to be dragable

2. Drag things into the destination

3. Uploading things (like github transferring files to its own remote repository)

I’m going to talk about one and two today,

Drag and drop a single element

<div class=" SRC "> <div class="dragable"> <div class=" TXT "id=" TXT "> All text can be dragged <p Draggable ="true"</p> </div> </div> <div id="target">Drop here</div> </div>Copy the code

So I’m going to set “Draggable =”true” to allow the mouse to move it, and by adding” draggable=”true”, we can drag this text.

This text sets the property draggable=”true”

The next step is to listen for the elements that are being dragged and asked, how are the elements changing?

Listening on events:

Ondrag Trigger this event when an object is dragged [active event]

Ondragdrop An external object is dragged into the current window or frame

Ondragend This event is triggered when the mouse drag ends, that is, the mouse button is released

Ondragenter Raises this event when an object is dragged by the mouse into its container scope

Ondragleave Raises this event when an object is dragged by the mouse out of its container scope

Ondragover Raises this event when a dragged object is dragged within the scope of another object container

Ondragstart Raises this event when an object is about to be dragged

Ondrop Raises this event when the mouse key is released during a drag

Event listening mode:

Listen to get the object to listen on, and use the listener event **, document.getelementByID (” “) to get an object. 支那

let dragSrc = document.getElementById(‘txt’); // drag

let target = document.getElementById(‘target’); // drop

dragSrc.ondragstart = handle_start;

The drag and drop handlers can both add listening events

Drop the mouse key in the Drop here box and write to the ondrap event (target.innerhtml = dragsrc.innertext;) You can Drop elements into the Drop Here box

For example, put “draggable=”true” in the target box,

You can also implement style changes after dragging elements into the destination, using target.classlist.add (‘hover’);

When triggering a function, add CSS (.hover)

Drag + DROP Good user experience You can add a CURSOR to simulate the CSS: Move The mouse becomes a hand when you drag and drop the cursor

The drag code is:

<script> let dragSrc = document.getElementById('txt'); // drag let target = document.getElementById('target'); // drop target.ondragenter = handle_enter; target.ondrop = handle_drop function handle_drop(event) { event.preventDefault(); target.innerHTML = dragSrc.innerText; } function handle_enter(event) { event.preventDefault(); // ('handle_enter - triggered when the element enters the destination '); target.classList.add('hover'); } } </script>Copy the code

Drag and drop multiple elements:

<div class="main"> <div class="left" id="left"> <div class="txt-show"> Left area </div> <div class="dargable TXT "id=" txT1" Draggable ="true"> moveable text one </div> <div class="dargable TXT "id="txt2" draggable="true"> moveable text two </div> <div class="dargable" TXT "id="txt3" draggable="true" <div class="dargable TXT" id=" txT4 "draggable="true"> moveable text four </div> <div Class ="dargable TXT "id="txt5" draggable="true"> Movable text 5 </div> </div> <div class="right" id="right"> <div Class ="txt-show"> Right area </div> </div>Copy the code

How do I set the event for the object that I want to listen to, five elements here?

You can’t register events on a pseudo-array element at once, you have to register them one by one, because JS events have a bubbling mechanism that allows you to set events on their parent elements. You can then add an event handler using addEventListener(),

AddEventListener adds event handling (typically with three properties)

Event name 2. Event handler 3. A Boolean

let left = document.getElementById(‘left’)

let target = document.getElementById(‘right’)

left.addEventListener(‘dragstart’, (event) => {

const target = event.target;

event.dataTransfer.setData(‘Text’, target.id)

})

event.target; In a drag element, the event returns a target property telling us which element is being dragged. Left. AddEventListener (‘ dragStart ‘, (event) Adds an (onDragStart) event to the left object, which is triggered when the object is about to be dragged

Event. The dataTransfer. SetData (‘ Text, target id) drag and drop, dataTransfer properties like send a parcel by post. The target id with them and named Text

target.addEventListener(‘drop’, (event) => {

event.preventDefault();

let drag_id = event.dataTransfer.getData(‘Text’);

target.appendChild(document.getElementById(drag_id))

})

event.dataTransfer.getData(‘Text’); Gets the value in the package Text(‘key’)

target.appendChild(document.getElementById(drag_id))

Add a child node after the last node under target (document.getelementById (drag_id))

Most apps and browsers have a default drag-and-drop behavior.

Event.preventdefault () prevents it

The drag code is:

<script> let left = document.getElementById('left') let target = document.getElementById('right') left.addEventListener('dragstart', (event) => { const target = event.target; event.dataTransfer.setData('Text', target.id) }) left.addEventListener('drag', (event) => { console.log('drag'); }) left.addEventListener('dragend', (event) => { console.log('dragend'); }) target.addEventListener('dragenter', (event) => { event.preventDefault(); console.log('dragenter') }) target.addEventListener('dragover', (event) => { event.preventDefault(); console.log('dragover') }) target.addEventListener('dragleave', (event) => { event.preventDefault(); console.log('dragleave') }) target.addEventListener('drop', (event) => { event.preventDefault(); let drag_id = event.dataTransfer.getData('Text'); Target.appendchild (document.getelementById (drag_id)) console.log(' drag element away from original location to target address '); }) </script>Copy the code

** * Drag the element to complete the drag back:

Add the ondrap event to the left object, and then put the drag-back content into the first node

target.addEventListener('dragstart', (event) => {    
const target = event.target;    
event.dataTransfer.setData('Txt', target.id)  
})
left.addEventListener('drop', (event) => { 
event.preventDefault(); 
let targe_id = event.dataTransfer.getData('Txt');    
left.appendChild(document.getElementById(targe_id)) 
 })
Copy the code

Conclusion:

Github has a huge pit in its drag-and-upload feature

Pit 1: Most apps and browsers will have drag behavior by default (drag content will be displayed in full)

Event.preventdefault () prevents it

Pit 2: Five elements under a box, how do I set its events?

Js events have bubbling mechanisms to set events on their parent elements

document

.getElementById(‘left’)

.addEventListener(‘dragstart’, () => {

Console. log(‘ on parent ‘);

})

But there is an event.target that listens for which child element is being dragged