Javascript ondrag, ondragstart, ondragend

Question

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

Aucun de ces événements ne semble se déclencher et je n'ai aucune erreur. Je ne trouve pas non plus beaucoup de documentation utile à ce sujet. Suis-je l'interpréter à tort, pouvez-vous utiliser ces événements pour écrire des fonctionnalités pour faire glisser un div autour de l'écran?

Answer 1

Jetez un oeil à cette documentation: https://developer.mozilla.org/En/DragDrop/Drag_and_Drop

Note: Il ne fonctionne pas dans tous les navigateurs.

Si vous voulez une utilisation de support multi-navigateur JQuery: http://jqueryui.com/demos/draggable/

exemple jQuery:

<div id="draggable" class="ui-widget-content"> 
    <p>Drag me around</p> 
</div> 

<script> 
    $(function() { 
     $("#draggable").draggable({ 
      drag: function(event, ui) {} 
     }); 
    }); 
</script> 

Un autre exemple:

<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> 

Answer 2

Je n'ai pas utilisé moi-même de traînée, mais je crois que c'est le glisser "edit action" - par exemple, sélectionner du texte et le faire glisser dans une zone de texte/textarea.

Vous devrez peut-être mettre en œuvre vos propres onmousedown()onmouseup() et onmousemove() gestionnaires pour la fonctionnalité, je pense que vous êtes après

Answer 3

Un moyen facile de le faire est avec jQuery UI, assurez-vous d'utiliser après votre div dynamique a été rendu.

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

Answer 4

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