Drag and Drop comme WordPress

Version imprimable

19/04/2012, 16h44
bigbob195

Drag and Drop comme WordPress

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)

http://img11.hostingpics.net/thumbs/...uwordpress.gif

Merci
19/04/2012, 17h00
Kaamo

Il faut demander avec les bons mots clés, c'est beaucoup plus rapide que de poster ici en plus.
19/04/2012, 17h27
bigbob195

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
19/04/2012, 17h30
Kaamo

Citation:

(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

Essaie voir ceci

CODE JAVASCRIPT DU DRAG AND DROP

Code:

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:

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

21/04/2012, 15h20
NoSmoking

Bonjour,

Citation:

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.