12
votes

JavaScript Ondrag, Ondragstart, Ondragend

J'ai essayé d'utiliser ondrag () et d'autres fonctions sur un div rendu dynamiquement sur un html page.

Aucun de ces événements ne semble tirer, ni je n'ai aucune erreur. Je ne trouve pas beaucoup de documentation utile à ce sujet non plus. Suis-je l'interprétation à tort, pouvez-vous utiliser ces événements sur la fonctionnalité de script pour faire glisser un div autour de l'écran?


4 commentaires

Utilisez-vous des cadres / plugins JavaScript? Si ce n'est pas autre que IE et Safari, d'autres navigateurs ne comprennent pas l'ONDRAG. Pouvez-vous coller votre code?


Navigateur? DOCTYPE? Puissiez-vous donner d'autres détails?


Bon article: QuirksMode.org/blog/archives/2009/09/Le_html5_drag .html


La spécification HTML5 standardise le glisser-déposer: dev.w3.org/html5/ Spécification / aperçu.html # DND


5 Réponses :


9
votes

Jetez un coup d'œil à cette documentation: https://developer.mozilla.org/fr/dragdrop / Drag_and_drop

Remarque: il ne fonctionne pas dans chaque navigateur. P>

Si vous voulez un support croisé Utilisez JQuery: http://jqueryui.com/demos/draggable/ p>

jQuery Exemple: p>

<div id="toBeDragged" draggable="true">
  This text <strong>may</strong> be dragged.
</div>

<script>
document.getElementById('toBeDragged').addEventListener('dragstart', function(event) {
    event.dataTransfer.setData('text/plain', 'This text may be dragged');
});
</script>


3 commentaires

Je n'utilise pas jquery désolé


@Tom Gullen: Qu'en est-il de l'autre exemple?


Si vous souhaitez une solution de traînée de navigation croisée robuste, je vous recommanderais d'utiliser l'une des nombreuses options disponibles construites sur un cadre JS existant.



1
votes

Je n'ai pas utilisé moi-même me traîner mais je crois que c'est la glisser "Modifier l'action" - par exemple la sélection de texte et le glisser dans une zone de texte / textarea.

Vous devrez peut-être implémenter votre propre Onmousedown () Onmouseup () et Onmousemove () Les gestionnaires de la fonctionnalité Je pense que vous êtes Après


0 commentaires

-1
votes

Un moyen facile de le faire est avec JQuery UI, assurez-vous de l'utiliser après que votre dynamique div code> a été rendu.

$(document).ready(function () {
    $('.my_draggable_elements').draggable({
        drag: function(){
          // do something
        }
    });
});


0 commentaires

0
votes

Y a-t-il du contenu dans la DIV? Je ne pense pas que ce soit l'élément lui-même qui est traîné dans cet événement particulier.


0 commentaires

1
votes

Réponse courte:


0 commentaires