web-dev-qa-db-fra.com

jquery UI triable: comment puis-je changer l'apparence de l'objet "placeholder"?

Dans l'exemple donné à http://jqueryui.com/demos/sortable/#placeholder l'espace réservé est la boîte orange qui apparaît lorsque vous faites glisser l'un des éléments.

Cet élément peut être modifié en utilisant l'option 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 souhaite personnaliser davantage cet élément, par exemple en fournissant une fonction à l'option placeholder de la même manière que l'on peut fournir une fonction à l'option helper.

Que devrais-je changer (par exemple dans sortable.js) pour ce faire?

jqueryjquery-uijquery-ui-sortable
49
brahn

En regardant la source de ui.sortable.js (1.7.2), vous pouvez tricher et définir le placeholder sur un objet avec une fonction element et une fonction update. La fonction element est utilisée pour renvoyer l'objet dom d'espace réservé et la fonction update vous permet de faire des choses comme corriger sa taille (vous pouvez consulter le _createPlaceholder fonction à l'intérieur triable si vous voulez voir ce que fait l'implémentation par défaut).

Ainsi, par exemple, ce qui suit créera un élément de liste avec le test Word à l'intérieur comme espace réservé (notez qu'il renvoie l'objet dom réel ([0]) et non 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 lis correctement la source, la fonction element doit passer l'élément courant (objet jQuery) et this doit pointer vers le sortable lui-même (c'est-à-dire $("#sortable") dans ce cas). Dans update vous passez le "conteneur" qui est l'objet qui contient toutes les options, & l'élément, etc & le placeholder lui-même.

Veuillez noter qu'il s'agit d'un hack non documenté, il ne serait donc évidemment pas pris en charge et pourrait changer avec la prochaine version de jQuery UI ... mais il pourrait toujours vous être utile, étant donné que vous parliez de modification ui.sortable.js directement de toute façon.

J'espère que cela pourra aider.

90
Alconja

Une approche plus hackish 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!");
    }
});
53
brahn