Implémentation HTML5 CSS3 du glisser-déposer (Drag and Drop) example_html5 compétences du didacticiel-Tutoriel H5-php.cn

Cet article présente brièvement l'implémentation par glisser-déposer de HTML5. Le glisser-déposer fait partie du standard 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 glissé, dragElement : (1) Ajouter un événement : ondragstart (2) Ajouter un attribut : dragable

Placer des éléments, dropElement : 1. Ajouter des événements : ondargenter, ondragover, ondragleave, ondragend, ondrop C'est très similaire aux événements de mouse in et out, et les mots sont faciles à comprendre, donc Je n'entrerai pas dans les détails, des exemples seront utilisés pour illustrer ci-dessous.

2. Glisser-déposer entre les éléments de la page Ce qui suit est un petit exemple de glisser-déposer entre divs pour montrer comment chaque événement est déclenché :

Copier le code Le code est le suivant : #dropEle div { float: left; } /** * Le glisser-déposer fait partie du standard HTML5. * Prise en charge du navigateur * Internet Explorer 9, Firefox, Opera 12, Chrome et Safari 5 prennent en charge le glisser-déposer. */ $(function () { $("#dragEle")[0].ondragstart = function (event ) { console.log("dragStart"); event.dataTransfer.setData("Text", event.target.id); }; / ** * Lors du dépôt des données glissées, l'événement de dépôt se produira. * Appelez PreventDefault() pour éviter le traitement des données par défaut du navigateur (le comportement par défaut de l'événement drop est de s'ouvrir sous forme de lien) * @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 ("Texte"); $(this).append($("#" id).clone().text($(this).find("div").length)); event .preventDefault(); }; /** * L'événement ondragover spécifie où placer les données glissées. *Par défaut, les données/éléments ne peuvent pas être placés dans d'autres éléments. Si nous devons autoriser le placement, nous devons empêcher la gestion par défaut de l'élément. */ $("#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 laisser "); } $("#dropEle")[0].ondragend = function (event) { console.log("onDrop end"); } }); Faites glisser un ou plusieurs fichiers sélectionnés dans le système dans le div. Les informations des fichiers déplacés seront stockées dans des fichiers. Nous pourrons ensuite obtenir le type, la longueur et le contenu du fichier via le fichier, puis le télécharger.

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 déplacé et le style affiché par la souris lors du processus de déplacement Cependant, ces attributs peuvent généralement être ignorés et ne sont généralement pas utilisés.