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

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>

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 :

//不加属性
$('#box').draggable();
//JS部分
$('#box').draggable({
    revert : true,        //拖动后是否回到起始位置，boolean类型
    cursor : 'text',       //鼠标拖拽样式，十字，文本等
    handle : '#pox',       //句柄，设置后只在设置后只能在当前元素下实现拖拽
    disabled : false,       //设置是否可以被拖拽
    edge : 50,          //设置边界往内多大距离可以实现拖拽
    axis : 'v',          //设置拖拽方向，v：垂直拖拽，h：水平拖拽
    proxy: 'clone',        //设置代理元素，使用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>

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

1.onBeforeDrag Se produit avant le glisser

$('#box').draggable({
    onBeforeDrag : function (e) {
        alert('拖动之前触发！');
        //return false;
    }
});

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

$('#box').draggable({
    onStartDrag : function (e) {
        alert('拖动开始时触发！');
        //return false;
    }
});

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

$('#box').draggable({
    onDrag : function (e) {
        alert('拖动过程中触发！');
    }
});
在拖

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

$('#box').draggable({
    onStopDrag : function (e) {
        alert('在拖动停止时触发！');
    }
});

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

$('#box').draggable({
    onBeforeDrag : function (e) {
         alert('拖动之前触发！');
        //return false;
    },
    onStartDrag : function (e) {
       alert('拖动时触发！');
    },
    onDrag : function (e) {
        alert('拖动过程中触发！');
    },
    onStopDrag : function (e) {
        alert('在拖动停止时触发！');
},});

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($('#box').draggable('options'));
//返回代理元素
onStartDrag : function (e) {
console.log($('#box').draggable('proxy'));
},
//禁止拖动
$('#box').draggable('disable');
//允许拖放
$('#box').draggable('enable');

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 = 'text';
});

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 c34106e0b4e09414b63b2ea253ff83d6

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!