Contrôler l'apparence de l'effet glisser-déposer HTML5

Est-il un moyen de contrôler l'apparence de "ce que vous êtes de glisser" à l'aide du Glisser-Déposer HTML5 Api?

Normalement, quel que soit l'élément HTML est déplaçable est ce qui devient semi-transparente et suit votre curseur jusqu'à l'arrêt/déposer. J'aimerais contrôle afin que je puisse commencer mon faites glisser à partir de n'importe où à l'intérieur d'un élément, mais quand vous avez réellement commencer à glisser, je ne peut avoir qu'une petite image de suivre le curseur, exactement là où est le curseur.

L'exemple pratique: Une liste de choses à faire glisser, chacun est une petite image et du texte pour le nom de la chose que vous serez glisser à côté d'elle. Je voudrais être en mesure de commencer mon glisser n'importe où dans l'élément sur l'image ou le texte, mais alors seulement l'image qui suit le curseur, et directement sous le curseur, plutôt que d'offset à partir de l'endroit où vous avez commencé le faisant glisser.

Je ne peux penser à quelques façons de le tromper (un élément masqué qui apparaît à l'emplacement du curseur de la souris est, lorsque vous commencez à faire glisser et est ce que vous avez fait glisser), ou recourir à la classique Javascript glisser-déposer.

Grâce

source d'informationauteur 5xJh0mCyKC

  1. 21

    Je pense que .setDragImage(element, x, y); peut-être ce que vous cherchez.

    function handleDragStart(e) {
    var dragIcon = document.createElement('img');
    dragIcon.src = 'http://...';
    dragIcon.width = 100;
    e.dataTransfer.setDragImage(dragIcon, x, y);
}

this.addEventListener('dragstart', handleDragStart, false);

    Exemple ici: jsfiddle.net/cnAHv/

  2. 8

    Malheureusement, il semble que la spec a été construit à la faveur cohérente comportement natif dans le navigateur de personnalisation.

    Nous avons fait un tas de recherche et de résumer nos conclusions ici:

    https://www.inkling.com/engineering/native-html5-drag-drop/

    Le long et court, cependant, est que l'aide d'un helper (comme jQuery UI) ou roulement de votre propre est généralement préférable si vous avez besoin de faire quelque chose de sophistiqué.

    Encore, si vous voulez vraiment utiliser le natif de comportement et setDragImage() n'est pas suffisante, il existe quelques alternatives.

    Une des plus extravagants approche pourrait consister en détournant le moteur de rendu pour créer une capture d'écran (!) de l'élément que vous souhaitez qu'il soit de style, et puis de l'insérer via un URI.

    Voir: http://cburgmer.github.io/rasterizeHTML.js/jsconfeu2013/#/step-4

    Un saner approche serait de tout simplement la position d'un fantôme élément à suivre la souris. Mais ce qui nous ramène à l'écriture d'un code re-met en œuvre des éléments de base de glisser comportement à l'extérieur de l'API.

  3. 2

    Prendre un coup d'oeil à cette partie de jQuery UI. Il vous permet de créer facilement un fantôme de l'élément traîné alors que l'original reste dans son emplacement d'origine. Vous pouvez également spécifier une "helper" pour suivre le curseur.

  4. 2

    Selon cette question sur StackOverflow, nous ne pouvons pas changer le style de la déplaçable objet en le faisant glisser, mais nous pouvons définir une image de glisser. Ce sera la cause d'une image à apparaître tout en faisant glisser le fantôme de l'objet.

    event.dataTransfer.setDragImage(document.getElementById('div2'),50,50);

    Explication:

    sur dataTransfer nous appelons un setDragImage() fonction dans laquelle nous transmettre l'ID de la div et de donner la position de l'endroit où l'image apparaît lorsque l'on va commencer à glisser.

    Voir plus sur dataTransfer ici:
    Les Développeurs De Mozilla - DataTransfer