Déplacement CSS3 et HTML5 sans JavaScript

Question

Puis-je utiliser CSS3 et HTML5 pour déplacer un div ou une table avec la souris dans la page sans JavaScript?

Je le fais déjà mais le div bouge automatiquement lorsque je bouge.

Answer 1

Vous devez installer JavaScript pour ça. Alors que vous pouvez programmer des animations, des transitions et autres dans CSS3 qui fournissent une animation aux composants de votre page Web, vous ne pouvez pas gérer les choses comme les clics et les ralentissements comme vous pouvez le faire en JavaScript.

Il est à noter que glisser-déposer fonctionnalité existe en HTML5, mais pas dans le sens que je suppose que vous souhaitez mettre en œuvre.

Answer 2

Comme le montre ici:

http://jsfiddle.net/yy2ak/

Vous pouvez déplacer le div en utilisant CSS3 translate and transition. Ou vous pouvez utiliser HTML5 draggable. Cependant, si vous voulez quelque chose de plus dynamique, alors JavaScript and jQuery sont vos options.

Pour atteindre cet objectif dans jQuery vous pouvez faire:

<div id="box" style="width: 50px; height: 50px; background-color: red;" /> 

$("#box").mouseover(function() { 
    var offset = $(this).offset().left + 20; 
    $(this).animate({ 
     left: offset 
    }, 1000); 
});