|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
 LIBRAIRIE DE DRAG AND DROP
 Information sur la source
 Description
Cette "librairie", permet de gèrer le déplacement de n'importe quel objet, j'ai joint quelques exemples au code source. Le principe est simple : définir une classe qui sera "dragable" et ensuite , l'ajouter sur les éléments que l'on souhaite déplacer. on peut ajouter la classe à un élément qui a déja une classe exemple avec les div dans la source. voila en espérant que cette petite source puisse aider certaines personne. COMPATIBLE IE/FIREFOX
 Source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>classe d'élement déplaçable</title>
<style type="text/css">
.boiteBleu{
background-color:#C1D8E8;
width:300px;
height:300px;
}
.boiterouge{
background-color:red;
width:150px;
height:150px;
}
.drag{
border:2px dashed #F1CEC5;
cursor:move;
}
</style>
<script type="text/javascript">
/*######################################
script permettant de rendre déplaçable
les éléments qui ont la classe définit
en paramètre
######################################*/
var classMove = "drag";
var myObjectClick = null;
var movable = false;
var positionXAtClick = null;
var positionYAtClick = null;
var positionXMyobjectClick = null;
var positionYMyobjectClick = null;
//Fonction permettant d'initialiser les listeners
function init_evenement(){
//On commence par affecter une fonction à chaque évènement de la souris
if(window.attachEvent){
document.onmousedown = start;
document.onmousemove = drag;
document.onmouseup = drop;
}
else{
document.addEventListener("mousedown",start, false);
document.addEventListener("mousemove",drag, false);
document.addEventListener("mouseup",drop, false);
}
}
//Fonction permettant de récupèrer l'objet sur lequel on a clické, et l'on récupère sa classe
function start(e){
//On initialise l'évènement s'il n'a aps été créé ( sous ie )
if(!e){
e = window.event;
}
//Détection de l'élément sur lequel on a clické
monElement = (e.target)? e.target:e.srcElement;
if(monElement)
{
//On appel la fonction permettant de récupèrer la classe de l'objet et assigner les variables
getClassDrag(monElement);
if(myObjectClick){
positionXAtClick = e.clientX;
positionYAtClick = e.clientY;
positionXMyobjectClick = parseInt(myObjectClick.offsetLeft);
positionYMyobjectClick = parseInt(myObjectClick.offsetTop);
return false;
}
}
}
function drag(e){
//On initialise l'évènement s'il n'a aps été créé ( sous ie )
if(!e){
e = window.event;
}
//Si l'objet est déplaçable et qu'il existe
if(movable && myObjectClick){
myObjectClick.style.position = "absolute" ;
//On récupère la position de la souris par rapport à l'objet
myObjectClick.style.left = e.clientX + ( positionXMyobjectClick - positionXAtClick ) + "px";
myObjectClick.style.top = e.clientY + ( positionYMyobjectClick - positionYAtClick ) + "px";
return false;
}
}
function drop(){
myObjectClick = null;
movable = false;
positionXAtClick = null;
positionYAtClick = null;
positionXMyobjectClick = null;
positionYMyobjectClick = null;
}
function getClassDrag(myObject){
with(myObject){
var x = className;
listeClass = x.split(" ");
//On parcours le tableau pour voir si l'objet est déplaçable
for(var i = 0 ; i < listeClass.length ; i++){
if(listeClass[i] == classMove){
movable = true;
myObjectClick = myObject;
}
}
}
}
window.onload = init_evenement;
</script>
</head>
<body>
<div class="boiteBleu drag"></div>
<div class="boiterouge drag"></div>
<div class="drag">et avec du contenu</div>
<div class="boiteBleu"></div>
<input type="text" class="drag" style="width:300px" />
</body>
</html>
 Conclusion
 Sources du même auteur
 Sources de la même categorie
Sources en rapport avec celle ci
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
position de la souris sur une image [ par golgoth ]
Bonjour,Comment faire pour recuperer dans un lien la position de la souris sur une image quand je clic sur celle-ci ? Est ce possible ?Merci pour votr
Modifier position de la souris [ par schub1015 ]
Bonjour,j'aimerais savoir s'il est possible de modifier la position de la souris ?Merci pour vos réponses.
Position de la souris [ par SDK_akira ]
Bonjour ^^ Je cherche un moyen de recuperer la position de la souris en javascript, c'est possible ? (j'ai cherché mais je n'ai rien trouvé
[DEPLACE]variable definie par la position de la souris [ par Ankaa1988 ]
Bonjour a tous, je suis en train de me débattre pour trouver le moyen de modifier une variable en fonction de la position de la souris. je m'explique
variable definie par la position de la souris [ par Ankaa1988 ]
Bonjour a tous, je suis en train de me débattre pour trouver le moyen de modifier une variable en fonction de la position de la souris. je m'explique
Position souris et frames [ par PlasTicGoat ]
bonjour, J'ai une page web composée de 3 frames: - 1 principale - 1 bandeau en haut - 1 paneau à gauche Je voudrais savoir précis
Position de la souris sur une image [ par REMqb ]
Voila : comment obtenir la position X et Y de la souris quand elle est sur une image?
Scrollbar et déplacement d'une image avec la souris [ par cepekinio ]
Bonjour,Contexte : appli web J2EE (JSP/JVScript/java) .J'ai réaliser une sorte de visionneuse de document(au format jpg) et je viens d'implémenter une
TextArea ou Select et position de la souris [ par 6BerYeti ]
Bonjour,Je souhaite faire afficher une infobulle là où est le curseur (avec un offset) et à la déplacer qd la souris se déplace.J'ai à peu près tout c
Connaître la position d'un input [ par kcin ]
Salut à tous.Je vois de partout des codes permettant de connaître la position de la souris, mais existe t-il un code pour connaître la position d'un i
|
 Téléchargements
Logiciels à télécharger sur le même thème :
Comparez les prix Nouvelle version
|