jquery UI sortable: comment changer l'apparence de l'objet "placeholder"?

Question

Dans l'exemple donné à http://jqueryui.com/demos/sortable/#placeholder l'espace réservé est l'orange box qui s'affiche lorsque vous faites glisser des éléments.

Cet élément peut être modifié à l'aide de l' placeholder -- mais il vous permet uniquement de modifier la classe de l'élément, comme décrit ici: http://jqueryui.com/demos/sortable/#options

Je voudrais personnaliser cet élément plus, par exemple en fournissant une fonction à l' placeholder option de la même manière que l'on peut fournir une fonction à l' helper option.

De quoi aurais-je besoin de changement (par exemple, dans sortable.js) pour ce faire?

Answer 1

En regardant la source pour ui.sortable.js (1.7.2), vous pouvez tricher et de définir l' placeholder à un objet avec un element fonction et à l' update fonction. L' element fonction permet de retourner l'espace réservé à l'objet dom et l' update fonction vous permet de faire des choses comme correcte de sa taille (vous pouvez consulter l' _createPlaceholder fonction à l'intérieur de triable si vous voulez voir ce que le défaut de mise en œuvre n').

Ainsi, par exemple, la commande suivante va créer un élément de liste avec la parole de test à l'intérieur de votre espace réservé (notez qu'il retourne le réel objet dom ([0]) et non pas l'objet jQuery lui-même):

$("#sortable").sortable({
    placeholder: {
        element: function(currentItem) {
            return $("<li><em>test</em></li>")[0];
        },
        update: function(container, p) {
            return;
        }
    }
});

Si je suis en train de lire source correctement, l' element fonction doit être transmis à l'élément actif (objet jQuery) et this doivent pointer vers l' sortable lui-même ( $("#sortable") dans ce cas). En update vous êtes passé le "conteneur" qui est l'objet qui contient toutes les options, & l'élément, etc & le placeholder lui-même.

Veuillez noter que ceci est un sans-papiers hack, de sorte qu'il n'a évidemment pas pris en charge et peut changer avec la prochaine version de jQuery UI... mais elle n'est peut être utiliser pour vous, vu que vous parliez de l'édition d' ui.sortable.js directement de toute façon.

Espérons que cela aide.

Answer 2

Une approche plus compliquée que j'ai trouvée: on peut utiliser l'option start pour modifier l'élément d'espace réservé, par exemple comme suit

 $("#sortable").sortable({
    start: function (e, ui) { 
      // modify ui.placeholder however you like
      ui.placeholder.html("I'm modifying the placeholder element!");
    }
});