Un code qui, je crois, pourra servir à la réalisation de projets. Comme le titre l'indique, il s'agit d'un prototype de drag'n drop. Je l'ai simplifié du mieux que j'ai pu pour qu'on puisse le modifier, l'adapter, l'améliorer.
Source / Exemple :
/** Définition des variables utilisées **/
var z = 1
var startMouseX, startMouseY, startObjX, startObjY
function configClass() {
initConditions() // Valeurs initiales (aucun mouvement permis)
/** Paramètres appliqués à tout les span ayant comme classe "moveable" **/
var s = document.getElementsByTagName("span")
for (var i=0; i<s.length; i++) {
if (s[i].className == "moveable") {
s[i].onmousedown = function() {initCoord(this,event)}
s[i].onmousemove = function() {dragElement(this,event)}
s[i].onmouseout = initConditions
s[i].onmouseup = initConditions
}
}
}
function initConditions() {
/** Initialement, aucun objet ne peut bouger **/
canMove = new Array(GT("span").length)
for (var i=0; i<GT("span").length; i++) {
canMove[i] = false
}
}
function initCoord(element, event) {
canMove[getN(element)] = true //Permet l'élément de bouger
startMouseX = event.clientX //Pos. X (souris)
startMouseY = event.clientY //Pos. Y (souris)
startObjX = size(element.style.left) //Pos. X (élément)
startObjY = size(element.style.top) //Pos. Y (élément)
bringFront(element) //Met l'élément au premier plan
}
function bringFront(element) {
element.style.zIndex = z+=2
}
function dragElement(element, event) {
/** Si la condition le permet, le span suit la souris **/
if (event.button && canMove[getN(element)]) {
dragX(element, event)
dragY(element, event)
}
}
function dragX(element, event) {
/** Maintenir la distance entre le haut de l'objet et la souris (position X) **/
var dLeft = startMouseX - startObjX
element.style.left = event.clientX - dLeft
}
function dragY(element, event) {
/** Maintenir la distance entre le haut de l'objet et la souris (position Y) **/
var dTop = startMouseY - startObjY
element.style.top = event.clientY - dTop
}
/** Récupère la position (ordre) d'un élément **/
function getN(element) {
for (var i=0; i<GT("span").length; i++) {
if (GT("span")[i] == element)
return i
}
}
/** Capture la valeur numérique d'une grandeur **/
function size(strSize) {
if (strSize.indexOf("px") != -1)
end = strSize.length - 2
else
end = strSize.length
return strSize.substring(0, end)
}
////////////////////////////////
// Pour raccourcir les lignes
////////////////////////////////
function GT(tag) {
return document.getElementsByTagName(tag)
}
function GE(id) {
return document.getElementById(id)
}
<html>
<title>:: Drag'n'drop ::</title>
<script type="text/JavaScript" src="dragndrop.js"></script>
<style type="text/css">
.moveable {
border: solid 1px;
border-color: silver;
padding: 5;
background-color: #0050FF;
color: white;
position: absolute;
cursor: default;
width: 100px;
height: 100px;
}
</style>
<body onload="configClass();">
<nobr><span class="moveable" style="left:25;top:25;">1</span></nobr>
<nobr><span class="moveable" style="left:125;top:25;">2</span></nobr>
<nobr><span class="moveable" style="left:225;top:25;">3</span></nobr>
<nobr><span class="moveable" style="left:25;top:125;">4</span></nobr>
<nobr><span class="moveable" style="left:125;top:125;">5</span></nobr>
<nobr><span class="moveable" style="left:225;top:125;">6</span></nobr>
<nobr><span class="moveable" style="left:25;top:225;">7</span></nobr>
<nobr><span class="moveable" style="left:125;top:225;">8</span></nobr>
<nobr><span class="moveable" style="left:225;top:225;">9</span></nobr>
</body>
</html>
Conclusion :
Mon idée était relativement simple. Pour faire court: calculer la distance entre la souris et les bordures de l'objets lorsqu'on clique dessus, et conserver cette distance lors du déplacement de la souris.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.