D'accord, il semblerait que cela devrait être simple. Je dois prendre une div déjà existante et la déplacer en fonction de la position de la souris dans la fenêtre. J'ai cherché partout et cela m'a conduit à des méthodes compliquées de faire la même chose et implique l'utilisation de j-query. Je dois utiliser strictement javascript pour ce que j'essaie de faire.
Méthode :
var mousePosition;
var div;
(function createDiv(){
div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "blue";
div.addEventListener('mousedown', handleKeyPressed, true);
document.body.appendChild(div);
})();
function handleKeyPressed(event) {
event.preventDefault();
mousePosition = {
x : event.clientX,
y : event.clientY
};
div.style.left = mousePosition.x;
div.style.top = mousePosition.y;
//alert("whoa!");
}
Je pense que vous cherchez quelque chose de plus comme ça
var mousePosition;
var offset = [0,0];
var div;
var isDown = false;
div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "blue";
document.body.appendChild(div);
div.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
div.offsetLeft - e.clientX,
div.offsetTop - e.clientY
];
}, true);
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
div.style.left = (mousePosition.x + offset[0]) + 'px';
div.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
Vérifiez si cela est plus lisse que adeneo: VIOLON
var m = document.getElementById('move');
m.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
function mouseUp() {
window.removeEventListener('mousemove', move, true);
}
function mouseDown(e) {
window.addEventListener('mousemove', move, true);
}
function move(e) {
m.style.top = e.clientY + 'px';
m.style.left = e.clientX + 'px';
};
jquery est beaucoup plus facile à déployer. Je suis surpris que vous disiez que vous ne voulez pas l'apprendre.
Vous pouvez enregistrer le fichier jQuery sur votre ordinateur local afin de ne pas avoir besoin d’Internetpour utiliser les fonctions jQuery.
Dans mon cas, je l'ai enregistré dans le dossier des outils. Je n'ai donc pas besoin d'être sur internet.
Pour toutes les nombreuses lignes de code js répondues ci-dessus, vous n'avez besoin que d'une petite ligne.
<script src="/common/tools/jquery-1.10.2.js"></script>
<script src="/common/tools/jquery-ui.js"></script>
<script>
$(function() {
$( "#mydiv_to_make_draggable" ).draggable();
});
</script>
Je viens d’apporter un petit changement à la réponse @adeneo qui fonctionne très bien… Si tout est contenu dans une fonction et que chaque événement est associé à la div, vous pouvez l’utiliser comme partie d’une bibliothèque.
Appelez la fonction suivante en passant un identifiant. Si le div n'existe pas, il est créé.
function drag_div(div_id){
var div;
div = document.getElementById(div_id);
if(div == null){
div = document.createElement("div");
div.id = div_id;
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "blue";
document.body.appendChild(div);
}
div.addEventListener('mousedown', function(e) {
div.isDown = true;
div.offset = [
div.offsetLeft - e.clientX,
div.offsetTop - e.clientY
];
}, true);
div.addEventListener('mouseup', function() {
div.isDown = false;
}, true);
div.addEventListener('mousemove', function(event) {
event.preventDefault();
if (div.isDown) {
div.mousePosition = {
x : event.clientX,
y : event.clientY
};
div.style.left = (div.mousePosition.x + div.offset[0]) + 'px';
div.style.top = (div.mousePosition.y + div.offset[1]) + 'px';
}
}, true);
}