jQuery EasyUI Drag and Drop -Glisser-déposer de base

Ce tutoriel vous montre comment rendre des éléments HTML déplaçables. Dans cet exemple, nous allons créer trois éléments DIV puis activer leur glisser-déposer.

Tout d'abord, nous créons trois éléments <div> :

    <div id="dd1" class="dd-demo"></div>
    <div id="dd2" class="dd-demo"></div>
    <div id="dd3" class="dd-demo"></div>

Pour le premier élément <div>, nous le rendons déplaçable en utilisant les valeurs par défaut.

    $('#dd1').draggable();

Pour le deuxième élément <div>, nous le rendons déplaçable en créant un proxy qui clone l'élément d'origine.

    $('#dd2').draggable({
        proxy:'clone'
    });

Pour le troisième élément <div>, nous le rendons déplaçable en créant un proxy personnalisé.

    $('#dd3').draggable({
        proxy:function(source){
            var p = $('<div class="proxy">proxy</div>');
            p.appendTo('body');
            return p;
        }
    });

Télécharger les exemples jQuery EasyUI

jeasyui-dd-basic.zip