Maison > Article > interface Web > Explication détaillée des exemples de fonctions glisser-déposer HTML5

Explication détaillée des exemples de fonctions glisser-déposer HTML5

零下一度original: 2017-07-16 15:37:271657parcourir

HTML5 fournit une API glisser-déposer dédiée, vous n'avez donc pas à vous soucier d'obtenir ce genre d'effet à l'avenir. Cependant, étant donné que le navigateur Opera ne semble pas s'y intéresser, et que sa polyvalence est encore sujette à caution, j'en parlerai donc brièvement ici. Le glisser-déposer fait partie de la norme HTML5.

Prise en charge des navigateurs

Internet Explorer 9, Firefox, Opera 12, Chrome et Safari 5 prennent en charge le glisser-déposer.

Élément dragué, dragElement :

1. Ajouter un événement : ondragstart

2. Placer des éléments, dropElement :

1. Ajouter des événements : ondargenter, ondragover, ondragleave, ondragend, ondrop

C'est très similaire aux événements tels que mouse in and out, littéralement. facile à comprendre, je n'entrerai donc pas dans les détails, j'utiliserai des exemples pour l'illustrer ci-dessous.

1. Glisser-déposer entre les éléments de la page

Ce qui suit est un petit exemple de glisser-déposer entre p pour montrer comment chaque événement est déclenché :

Quelques points à noter :

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>

    <style type="text/css">

        #dropEle
        p
        {
            float: left;
        }

    </style>

    <script src="../../jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>


    <script type="text/javascript">

        /**
         * 拖放（Drag 和 drop）是 HTML5 标准的组成部分。
         * 浏览器支持
         *Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
         */
        $(function ()
        {
            $("#dragEle")[0].ondragstart = function (event)
            {
                console.log("dragStart");
                event.dataTransfer.setData("Text", event.target.id);
            };

            /**
             * 当放置被拖数据时，会发生 drop 事件。
             * 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
             * @param event
             */
            $("#dropEle")[0].ondrop = function (event)
            {
             /*   for (var p in event.dataTransfer)
                {
                    console.log(p + " = " + event.dataTransfer[p] + " @@");
                }
            */
                console.log("onDrop");
                var id = event.dataTransfer.getData("Text");
                $(this).append($("#" + id).clone().text($(this).find("p").length));
                event.preventDefault();
            };

            /**
             * ondragover 事件规定在何处放置被拖动的数据。
             *默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
             */
            $("#dropEle")[0].ondragover = function (event)
            {
                console.log("onDrop over");
                event.preventDefault();
            }

            $("#dropEle")[0].ondragenter = function (event)
            {
                console.log("onDrop enter");
            }

            $("#dropEle")[0].ondragleave = function (event)
            {
                console.log("onDrop leave");
            }

            $("#dropEle")[0].ondragend = function (event)
            {
                console.log("onDrop end");
            }


        });

    </script>

</head>
<body>

<p style="border: 1px solid red ; width: 100px ; height: 100px ;text-align: center;line-height: 100px;"
     draggable="true" id="dragEle" >

</p>


<p style="width: 330px;min-height: 202px;border: 1px solid #444;margin-top: 20px;overflow-y: scroll;"
     id="dropEle"></p>


</body>
</html>

a. Le comportement par défaut des événements doit être organisé dans ondragover. Par défaut, les données/éléments ne peuvent pas être placés dans d'autres éléments.

b. Le comportement par défaut de l'événement drop est de l'ouvrir en tant que lien, son comportement par défaut doit donc être évité.

Vous remarquerez peut-être également : lors du glisser-déposer, l'événement contient un objet event.dataTransfer. Dans l'exemple ci-dessus, nous avons utilisé la méthode setData de l'objet pour transmettre l'identifiant du p glissé, puis obtenu. il dans le drop L'identifiant et l'élément est copié et ajouté au p placé.

Ce qui suit présente d'autres méthodes de cet objet :

event.dataTransfer :

items = [object DataTransferItemList] @@drag_drop.html:44

files = [object FileList] @@drag_drop.html:44

types = text/plain @@drag_drop.html:44

effectAllowed = all @@drag_drop.html:44

dropEffect = none @@drag_drop.html:44

clearData = function clearData() { [code natif] } @@drag_drop.html:44

getData = function getData() { [code natif] } @@drag_drop.html:44

setData = function setData() { [code natif] } @@drag_drop.html:44

setDragImage = function setDragImage() { [code natif] } @@

J'ai utilisé js pour imprimer tous ses attributs :

1 getData et setData ont été utilisés dans l'exemple ci-dessus, et clearData consiste à effacer l'ensemble. données.

2. Il convient de noter que les fichiers, lorsqu'un ou plusieurs fichiers sélectionnés dans le système d'exploitation sont glissés dans le p, les informations des fichiers déplacés seront stockées dans des fichiers, et nous pourrons ensuite obtenir le fichier. informations via le type de fichier, la longueur, le contenu, puis téléchargez-les.

3. setDragImage(image, x, y) est utilisé pour définir l'image d'effet qui se déplace avec la souris pendant le mouvement de la souris. Doit être défini dans dragstart.

4. Types, effectAllowed et dropEffect sont respectivement le type de l'élément glissé et le style affiché par la souris pendant le processus de glissement. Je pense que ces attributs peuvent être ignorés et ne sont généralement pas utilisés.

Points associés

Objet DataTransfer : Le support utilisé pour transférer l'objet déposé, généralement Event.dataTransfer.

attribut draggable : l'élément label doit être défini sur draggable=true, sinon il n'aura aucun effet, par exemple :

a35048bbd9d8d6e9f69c0639b46d383c

événement ondragstart : un événement déclenché lorsque l'élément glisser commence à être glissé. Cet événement agit sur l'élément glissé

événement ondraggenter : lorsque le glisser. l'élément commence à être glissé L'événement est déclenché lorsque l'élément entre dans l'élément cible. Cet événement agit sur l'élément cible

événement ondragover : L'événement est déclenché lorsque l'élément glisser se déplace sur l'élément cible. sur l'élément cible

événement ondrop : un événement déclenché lorsque l'élément glissé est sur l'élément cible et que la souris est relâchée. Cet événement agit sur l'élément cible

événement ondragend : un événement déclenché. lorsque le glissement est terminé. Cet événement Agit sur l'élément glissé

Méthode Event.preventDefault() : empêche l'exécution de certaines méthodes événementielles par défaut. PreventDefault() doit être exécuté dans ondragover, sinon l'événement ondrop ne sera pas déclenché. De plus, si vous faites glisser quelque chose depuis d'autres applications ou fichiers, en particulier des images, l'action par défaut consiste à afficher l'image ou les informations associées, et n'exécute pas réellement le dépôt. À ce stade, vous devez utiliser l'événement ondragover du document pour le tuer directement.

Propriété Event.effectAllowed : C'est l'effet de glissement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de didacticiel de lecture vidéo HTML5Article suivant：Exemple de didacticiel de lecture vidéo HTML5

Articles Liés

Voir plus