11544 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Voici mon problème.

Je souhaiterais rendre une DIV déplaçable dans ma page Web.
Pour ce faire je me suis orienté vers le html5.

J'arrive à avoir une solution fonctionnelle pour Chrome et Firefox, mais pas sur IE9.

Voici mon exemple de problème:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"  type="text/javascript"></script>
</head>
<body>
 
	<div id="mydiv" draggable="true" style="border: Solid 1px Black; width: 150px; height: 150px"></div>
 
	<script type='text/javascript'>//<![CDATA[ 
		$(window).load(function(){
		$('#mydiv')
	    .bind('selectstart', function(e) {
	        // Prevent text selection
	        return false;
	    })
	    .bind('dragstart', function(e) {
	        e.originalEvent.dataTransfer.setData("Text", $(e.target).closest('div').attr('id'));
	        console.log('dragstart');
	    })
	    .bind('drag', function(e) {
	        console.log('drag');
	    })
	    .bind('dragend', function(e) {
	        console.log('dragend');
	    })
	    .bind('click', function(e) {
	        return false;
	    });
	});//]]>  
 
	</script>
</body>
</html>


Pouvez-vous me confirmer que cela ne fonctionne pas aussi sur vos IE ?

Et si vous avez une piste pour le faire fonctionner, je suis preneur.

Martial.