Drag-and-drop API implements drag-and-drop sorting-H5 Tutorial-php.cn

Table of Contents

Foreword

Drag and drop events

dataTransfer object

setData()" >setData()

getData()

Data()" >##clearData()

#owed and dropEffect attributes" >All#owed and dropEffect attributes

兼容

Foreword

HTML5 provides a direct drag-and-drop API, which greatly facilitates us to achieve the drag-and-drop effect without having to write a lot of js, you can implement various drag-and-drop functions just by listening to the drag-and-drop events of elements.

If you want to drag and drop an element, you must set the element's draggable attribute to true. When this attribute is false, dragging and dropping will not be allowed. Both the img element and the a element have the draggable attribute set to true by default, so they can be dragged and dropped directly. If you do not want to drag and drop these two elements, just set the attribute to false.

Drag and drop events

Drag and drop events are generated by different elements. When an element is dragged and dropped, it may pass through many elements before finally reaching the element you want to place. Here, I temporarily call the dragged and dropped element the sourceobject, the passed element is called the process object, and the arrived element is called the target object. Different objects generate different drag and drop events.

Source object:

dragstart: The source object starts dragging and dropping.
drag: During the drag and drop process of the source object.
dragend: The drag and drop of the source object ends.

Process object:

dragenter: The source object begins to enter the scope of the process object.
dragover: The source object moves within the scope of the process object.
dragleave: The source object leaves the scope of the process object.

Target object:

drop: The source object is dragged and dropped into the target object.

<p id="source" draggable="true">a元素</p><p id="process">b元素</p><p id="target">c元素</p><script>
    var source = document.getElementById(&#39;source&#39;),     // a元素
        process = document.getElementById(&#39;process&#39;),   // b元素
        target = document.getElementById(&#39;target&#39;);     // c元素
    
    source.addEventListener(&#39;dragstart&#39;,function(ev){   // dragstart事件由a元素产生
        console.log(&#39;a元素开始被拖动&#39;);
    },false)    process.addEventListener(&#39;dragenter&#39;,function(ev){  // dragenter事件由b元素产生
        console.log(&#39;a元素开始进入b元素&#39;);
    },false)    process.addEventListener(&#39;dragleave&#39;,function(ev){  // dragleave事件由b元素产生
        console.log(&#39;a元素离开b元素&#39;);
    },false)    target.addEventListener(&#39;drop&#39;,function(ev){        // drop事件由c元素产生
        console.log(&#39;a元素拖放到c元素了&#39;);
        ev.preventDefault();
    },false)    document.ondragover = function(e){e.preventDefault();}</script>

Copy after login

dataTransfer object

Provides a data transfer in all drag and drop events The object dataTransfer is used to transfer data between the source object and the target object. Next, let's get to know the methods and properties of this object to understand how it transfers data.

setData()

This method stores data into the dataTransfer object. Receives two parameters. The first one represents the string indicating the type of data to be stored. Currently, the following types are supported:

text/plain: text text.
text/html: HTML text.
text/xml: XML text.
text/uri-list: URL list, each URL is one line.

The second parameter is the data to be stored. For example:

event.dataTransfer.setData(&#39;text/plain&#39;,&#39;Hello World&#39;);

Copy after login

getData()

This method reads data from the dataTransfer object. The parameter is the data type specified in setData. For example:

event.dataTransfer.getData(&#39;text/plain&#39;);

Copy after login

##clearData()

This method clears the data stored in the dataTransfer object The data. The parameter is optional and is the data type. If the parameter is empty, all types of data will be cleared. For example:

event.dataTransfer.clearData();

Copy after login

setDragImage()

This method sets the drag and drop icon by using the img element. Receives three parameters, the first is the icon element, the second is the X-axis displacement of the icon element from the mouse pointer, and the third is the Y-axis displacement of the icon element from the mouse pointer. For example:

var source = document.getElementById(&#39;source&#39;),
    icon = document.createElement(&#39;img&#39;);icon.src = &#39;img.png&#39;;source.addEventListener(&#39;dragstart&#39;,function(ev){
    ev.dataTransfer.setDragImage(icon,-10,-10)},false)

Copy after login

effect

All#owed and dropEffect attributes

combine these two attributes Set up drag and drop visual effects.

It is worth noting: IE does not support dataTransfer objects. Yes, it is not supported regardless of IE version.

Implement drag-and-drop sorting

We are already familiar with the use of drag-and-drop API. Let’s implement a simple drag-and-drop sorting, which is also common in projects. Let’s sort out the idea first:

In a list, each element can be dragged and dropped. Then you must first set the draggable attribute to true for each element.
Listen to the dragstart event of each element and style the source object to distinguish it.
Listen to the dragenter event of each element. When the source object enters the current element, add the source object before the element. In this way, the following elements will be squeezed out by the source object, achieving a sorting effect.
But you will find that the source object cannot be ranked last, but can only be ranked second to last. At this time, you need to listen to the dragleave event. When the process object is the last element, the source object leaves the process object, and then the source object is added to the end.

The main code is as follows:

var source = document.querySelectorAll(&#39;.list&#39;),
    dragElement = null;for(var i = 0; i < source.length; i++){
    source[i].addEventListener(&#39;dragstart&#39;,function(ev){
        dragElement = this;
    },false);

    source[i].addEventListener(&#39;dragenter&#39;, function(ev){
        if(dragElement != this){
            this.parentNode.insertBefore(dragElement,this);
        }
    }, false)

    source[i].addEventListener(&#39;dragleave&#39;, function(ev){
        if(dragElement != this){
            if(this == this.parentNode.lastElementChild || this == this.parentNode.lastChild){
                this.parentNode.appendChild(dragElement);
            }
        }
    }, false)};document.ondragover = function(e){e.preventDefault();}document.ondrop = function(e){e.preventDefault();}

Copy after login

Complete code address: drag-demo

兼容

主要是在IE中的兼容不太好，不过至少在IE10中能兼容上面的拖动排序。

而且在我简单的试验中发现，就是在 IE 中元素不设置 height 的时候，不会触发 dragleave 事件。

更重要的一点是在 ios 和安卓上，完全不兼容。不过还好，有一个插件能让它在移动端完美兼容。
插件地址：ios-html5-drag-drop-shim

只需要在原有的代码中引入该插件，即可在移动端上实现拖动了。

<script>var iosDragDropShim = { enableEnterLeave: true }</script><script src="vendor/ios-drag-drop.js"></script>

Copy after login

更多文章：lin-xin/blog

The above is the detailed content of Drag-and-drop API implements drag-and-drop sorting. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

4 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

1 months ago By DDD

Atomfall guide: item locations, quest guides, and tips

1 months ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7711

Java Tutorial

1640

CakePHP Tutorial

1394

Laravel Tutorial

1288

PHP Tutorial

1232

Related knowledge

PHP and Manticore Search Development Guide: Quickly Create a Search API Aug 07, 2023 pm 06:05 PM

PHP and ManticoreSearch Development Guide: Quickly Create a Search API Search is one of the indispensable features in modern web applications. Whether it is an e-commerce website, social media platform or news portal, it needs to provide an efficient and accurate search function to help users find the content they are interested in. As a full-text search engine with excellent performance, ManticoreSearch provides us with a powerful tool to create excellent search APIs. This article will show you how to

How to crawl and process data by calling API interface in PHP project? Sep 05, 2023 am 08:41 AM

How to crawl and process data by calling API interface in PHP project? 1. Introduction In PHP projects, we often need to crawl data from other websites and process these data. Many websites provide API interfaces, and we can obtain data by calling these interfaces. This article will introduce how to use PHP to call the API interface to crawl and process data. 2. Obtain the URL and parameters of the API interface. Before starting, we need to obtain the URL of the target API interface and the required parameters.

How to deal with Laravel API error problems Mar 06, 2024 pm 05:18 PM

Title: How to deal with Laravel API error problems, specific code examples are needed. When developing Laravel, API errors are often encountered. These errors may come from various reasons such as program code logic errors, database query problems, or external API request failures. How to handle these error reports is a key issue. This article will use specific code examples to demonstrate how to effectively handle Laravel API error reports. 1. Error handling in Laravel

React API Call Guide: How to interact and transfer data with the backend API Sep 26, 2023 am 10:19 AM

ReactAPI Call Guide: How to interact with and transfer data to the backend API Overview: In modern web development, interacting with and transferring data to the backend API is a common need. React, as a popular front-end framework, provides some powerful tools and features to simplify this process. This article will introduce how to use React to call the backend API, including basic GET and POST requests, and provide specific code examples. Install the required dependencies: First, make sure Axi is installed in the project

Oracle API Usage Guide: Exploring Data Interface Technology Mar 07, 2024 am 11:12 AM

Oracle is a world-renowned database management system provider, and its API (Application Programming Interface) is a powerful tool that helps developers easily interact and integrate with Oracle databases. In this article, we will delve into the Oracle API usage guide, show readers how to utilize data interface technology during the development process, and provide specific code examples. 1.Oracle

Save API data to CSV format using Python Aug 31, 2023 pm 09:09 PM

In the world of data-driven applications and analytics, APIs (Application Programming Interfaces) play a vital role in retrieving data from various sources. When working with API data, you often need to store the data in a format that is easy to access and manipulate. One such format is CSV (Comma Separated Values), which allows tabular data to be organized and stored efficiently. This article will explore the process of saving API data to CSV format using the powerful programming language Python. By following the steps outlined in this guide, we will learn how to retrieve data from the API, extract relevant information, and store it in a CSV file for further analysis and processing. Let’s dive into the world of API data processing with Python and unlock the potential of the CSV format

Oracle API integration strategy analysis: achieving seamless communication between systems Mar 07, 2024 pm 10:09 PM

OracleAPI integration strategy analysis: To achieve seamless communication between systems, specific code examples are required. In today's digital era, internal enterprise systems need to communicate with each other and share data, and OracleAPI is one of the important tools to help achieve seamless communication between systems. This article will start with the basic concepts and principles of OracleAPI, explore API integration strategies, and finally give specific code examples to help readers better understand and apply OracleAPI. 1. Basic Oracle API

Development suggestions: How to use the ThinkPHP framework for API development Nov 22, 2023 pm 05:18 PM

Development suggestions: How to use the ThinkPHP framework for API development. With the continuous development of the Internet, the importance of API (Application Programming Interface) has become increasingly prominent. API is a bridge for communication between different applications. It can realize data sharing, function calling and other operations, and provides developers with a relatively simple and fast development method. As an excellent PHP development framework, the ThinkPHP framework is efficient, scalable and easy to use.

See all articles