web-dev-qa-db-fra.com

Qu'est-ce que la propriété CSS -webkit-user-drag?

J'ai vu cela à quelques endroits maintenant, mais je ne trouve pas beaucoup d'informations à ce sujet:

-webkit-user-drag: element

Cela fait-il partie de la norme pour le glisser-déposer HTML5? Est-ce mieux/pire que d'utiliser la version d'attribut:

<div draggable="true">my draggable element</div>

Edit: je suis familier avec la spécification actuelle et en utilisant l'attribut draggable, ce que je ne sais pas, c'est exactement la propriété CSS * -user-drag.

csshtmldrag-and-drop
20
Christopher Scott

C'est une propriété spécifique à Webkit. Voici ce qu'en dit la documentation WebKit :

Rendre un élément déplaçable

WebKit fournit une prise en charge automatique pour permettre aux utilisateurs de faire glisser des éléments courants, tels que des images, des liens et du texte sélectionné. Vous pouvez étendre cette prise en charge pour inclure des éléments spécifiques sur une page HTML. Par exemple, vous pouvez marquer une balise div ou span particulière comme glissable.

Pour marquer un élément arbitraire comme pouvant être déplacé, ajoutez le -webkit-user-drag attribut à la définition de style de l'élément. Car -webkit-user-drag est un attribut de feuille de style en cascade (CSS), vous pouvez l'inclure dans le cadre d'une définition de style ou en tant qu'attribut de style en ligne sur la balise d'élément. Les valeurs de cet attribut sont répertoriées dans le tableau 4-1.

Valeurs pour -webkit-user-drag attribut:

  • none: ne permet pas de faire glisser cet élément.

  • element: permet de faire glisser cet élément.

  • auto: utilisez la logique par défaut pour déterminer si l'élément doit être glissé. (Les images, les liens et les sélections de texte sont les seuls éléments qui peuvent être glissés.) Il s'agit de la valeur par défaut.

Il est pris en charge par tous les navigateurs utilisant le moteur de rendu WebKit, donc Chrome, les versions plus récentes d'Opera, Safari, etc. La prise en charge dans les navigateurs mobiles utilisant WebKit peut varier selon le système d'exploitation mobile.

21
Blender

Bref aperçu: http://www.html5rocks.com/en/tutorials/dnd/basics/

Informations détaillées: http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html

Démo: http://html5demos.com/drag

2
tim.baker