Drag and Drop comme WordPress

**bigbob195** · 19/04/2012, 16h44

Bonjour,

Je recherche un tuto ou du moin le code pour réaliser un système de hiérarchisation en drag & drop comme pour la gestion des menu WordPress (voir image)

Merci

**Kaamo** · 19/04/2012, 17h00

Il faut demander avec les bons mots clés, c'est beaucoup plus rapide que de poster ici en plus.

**bigbob195** · 19/04/2012, 17h27

Merci mais enfaite c'est la possibilité de sous menu que je trouve intéressante (les sous menu sont décaler d'un cran a droite)
et je ne retrouve cela dans aucun tuto pour le moment

**Kaamo** · 19/04/2012, 17h30

(les sous menu sont décaler d'un cran a droite)

C'est de la mise en page ça, un style CSS devrait suffire

Et une donnée en plus pour différencier les niveaux des éléments

**mesken** · 21/04/2012, 11h56

Essaie voir ceci

CODE JAVASCRIPT DU DRAG AND DROP

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script language="javascript">
 
var positionX=0, positionY=0;
var dimX=0, dimeY=0;
var mavar=1;
var nouvellepositionX=0, nouvellepositionY=0;
 
function depart(calque) {
	dimX=positionX-document.getElementById(calque).offsetLeft;
	dimY=positionY-document.getElementById(calque).offsetTop;
	mavar=0;
}
 
function deplacement(page) {
if (document.all) {
positionX=event.clientX;
positionY=event.clientY;
}
else {
positionX=page.pageX; 
positionY=page.pageY; 
}
if(mavar!=1){
var nouvellepositionX=positionX-dimX;
var nouvellepositionY=positionY-dimY;
document.getElementById('calque1').style.left=
nouvellepositionX+"px";
document.getElementById('calque1').style.top=
nouvellepositionY+"px";
}
}
function arret(calque) {
calqueDragDrop="";
mavar=1;
}
document.onmousemove=deplacement;
document.onmouseup=arret;
 
</script>

PAGE HTML OU PHP (draganddrop.html)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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=utf-8" />
<title>Document sans nom</title>
</head>
 
<div id="calque1" class="calque" style="top:25px; left:931px; 
z-index:0; color:#009; background-color:#D5D5FF;" 
onMouseDown="depart('calque1')">Region</div>
 
<body>
</body>
</html>

Hope this will help

**NoSmoking** · 21/04/2012, 15h20

Bonjour,

Envoyé par mesken

Essaie voir ceci

il est des choses à oublier,
<script language="javascript"> mettre <script type="text/javascript"> ou encore simplement <script> en HTML 5.

De même les if (document.all) sont à éviter et qui plus est en début de test.

Drag and Drop comme WordPress

JavaScript

Vue hybride

Discussions similaires

Partager

Partager