Maison > interface Web > Tutoriel H5 > le corps du texte

Comment l'attribut html5draggable obtient-il l'effet de glissement de page ? La méthode est résumée ici !

寻∝梦
Libérer: 2018-08-31 16:45:11
original
3975 Les gens l'ont consulté

Cet article vous parle principalement de la technologie des attributs déplaçables pour obtenir l'effet de glissement de page. Continuez à lire, et vous découvrirez étape par étape que ce n'est en fait pas difficile. Lisons maintenant cet article ensemble.

Cet article vise à présenter Draggable (glisser) pour obtenir l'effet de glissement des éléments de la page, alors procédons étape par étape.

1. Méthode de chargement (la première est la méthode de chargement)

Chargement de style 1.css :

<div id="box" class="easyui-draggable" style="width:200px;height:150px;background:#F5F6F7;">
    内容部分
</div>
Copier après la connexion
Utiliser le style CSS pour charger Draggable est pratique et rapide, mais ce n'est pas propice à la gestion, nous avons donc une deuxième méthode de chargement, en utilisant Jquery pour charger. Généralement, nous utiliserons Jquery pour charger.

2. Chargement de Jquery :

//不加属性
$(&#39;#box&#39;).draggable();
//JS部分
$(&#39;#box&#39;).draggable({
    revert : true,        //拖动后是否回到起始位置,boolean类型
    cursor : &#39;text&#39;,       //鼠标拖拽样式,十字,文本等
    handle : &#39;#pox&#39;,       //句柄,设置后只在设置后只能在当前元素下实现拖拽
    disabled : false,       //设置是否可以被拖拽
    edge : 50,          //设置边界往内多大距离可以实现拖拽
    axis : &#39;v&#39;,          //设置拖拽方向,v:垂直拖拽,h:水平拖拽
    proxy: &#39;clone&#39;,        //设置代理元素,使用clone时为复制当前元素
    deltaX : 10,         //被拖拽元素左上角距离当前光标的X轴方向的距离
    deltaY : 10,         //被拖拽元素左上角距离当前光标的Y轴方向的距离  
    proxy: function(source){    //自定义代理元素
    var p = $(&#39;<div style="border:1px solid
    #ccc;width:400px;height:200px;"></div>&#39;);
    p.html($(source).html()).appendTo(&#39;body&#39;);
    return p;
    },
});
//HTML部分
<div id="box" style="width:400px;height:200px;background:red;">
    内容部分
</div>
Copier après la connexion

2. Événements (le second est les événements)

1.onBeforeDrag Se produit avant le glisser

$(&#39;#box&#39;).draggable({
    onBeforeDrag : function (e) {
        alert(&#39;拖动之前触发!&#39;);
        //return false;
    }
});
Copier après la connexion
Se produit avant le glisser, à la fois lorsque la souris clique sur l'élément et lorsque false est renvoyé. Ce ne sera pas le cas être possible de glisser-déposer, nous ne le laisserons pas renvoyer false directement, car cela n'a aucun sens et il devrait y avoir suffisamment de jugement logique lors de son utilisation.

2.onStartDrag se produit lorsque le glisser commence

$(&#39;#box&#39;).draggable({
    onStartDrag : function (e) {
        alert(&#39;拖动开始时触发!&#39;);
        //return false;
    }
});
Copier après la connexion
est exécuté au moment du glisser après le clic de la souris, et le temps d'exécution est après onBeforeDrag.

3. onDrag est exécuté pendant le processus de glissement

$(&#39;#box&#39;).draggable({
    onDrag : function (e) {
        alert(&#39;拖动过程中触发!&#39;);
    }
});
在拖
Copier après la connexion
est exécuté pendant le processus de glissement et renvoie false. lorsque le glisser ne peut pas être effectué


4.onStopDrag Se produit après l'arrêt du glisser

$(&#39;#box&#39;).draggable({
    onStopDrag : function (e) {
        alert(&#39;在拖动停止时触发!&#39;);
    }
});
Copier après la connexion
Déclenche après la fin du glisser, c'est-à-dire qu'il est exécuté lorsque le glisser la souris est relâchée, sans valeur de retour.

5. Les événements ci-dessus peuvent être utilisés en combinaison, et l'ordre d'exécution est onBeforeDrag --> onBeforeDrag --> onStopDrag

$(&#39;#box&#39;).draggable({
    onBeforeDrag : function (e) {
         alert(&#39;拖动之前触发!&#39;);
        //return false;
    },
    onStartDrag : function (e) {
       alert(&#39;拖动时触发!&#39;);
    },
    onDrag : function (e) {
        alert(&#39;拖动过程中触发!&#39;);
    },
    onStopDrag : function (e) {
        alert(&#39;在拖动停止时触发!&#39;);
},});
Copier après la connexion

3. Méthode (la troisième est la méthode)

Nom de la méthode : Description

  • option : Renvoyer l'objet d'attribut

  • proxy : renvoyer l'élément proxy de glisser si l'attribut proxy est défini

  • enabl : autoriser le glisser

  • désactiver : désactiver le glisser

//返回属性对象
console.log($(&#39;#box&#39;).draggable(&#39;options&#39;));
//返回代理元素
onStartDrag : function (e) {
console.log($(&#39;#box&#39;).draggable(&#39;proxy&#39;));
},
//禁止拖动
$(&#39;#box&#39;).draggable(&#39;disable&#39;);
//允许拖放
$(&#39;#box&#39;).draggable(&#39;enable&#39;);
Copier après la connexion

4. Définir les attributs par défaut (c'est le dernier paramètre)

Après l'avoir défini une fois, tous les glisser-déposer sur la page actuelle partageront cet attribut, et il n'est pas nécessaire de le définir à nouveau.

$(function(){
    $.fn.draggable.defaults.cursor = &#39;text&#39;;
});
Copier après la connexion
Ce qui précède est l'intégralité du contenu de cet article sur le glissement de page avec l'attribut draggable (si vous voulez en savoir plus, rendez-vous sur le site Web PHP chinois. Si vous avez des questions, vous pouvez les poser). ci-dessous.


[Recommandation de la rédaction]

Comment supprimer le label de la balise ol en HTML ? Résumé de l'utilisation de


    Comment supprimer le point de la balise ul en HTML ? Analyse d'instance de style de liste HTML non ordonnée

    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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!