Advertisements

Drag&Drop

Postby margaux-e » Mon May 20, 2013 3:08 am

Offline
margaux-e
Posts: 1
Joined: Mon May 20, 2013 2:59 am
I have a problem on the drag and drop
It works on the <canvas> or on my <div class="objets">
But not on my <div class="objet">

<doctype>
<html>
<head>
<title>Objets</title>
<meta name="Keywords" content="HTML,CSS,XML" />
<link rel="stylesheet" type="text/css" href="css/objets.css">

<script>
function multikaz(largeur,hauteur) {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.beginPath();
context.strokeStyle="blue";
context.lineWidth="2";
context.rect(0,0,largeur,hauteur); //marge gauche,marge haut,largeur,hauteur
context.stroke();
}

function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.Id);
}

function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

</script>
</head>

<body>
<?php
// Create connection
$con=mysql_connect('localhost','root','root');

//Connection à la BDD
$db_selected = mysql_select_db('multikaz', $con);

//recupére les données en BDD
$query = "SELECT * FROM ref";
$result=mysql_query($query);

echo'<div class="contenu">';
echo'<div Id="div1" class="box1" onDrop="drop(event);" onDragOver="allowDrop(event);">'; //WORKS
echo'</div>';//box1

echo'<div class="objets">';
echo'<canvas Id="canvas" width="400" height="1000"></canvas>';

while($data=mysql_fetch_assoc($result)){
if($data['type']==1) {
echo'<div Id="objet" draggable="true" onDragStart="drag(event)">'; //DOESN'T WORK
echo'<script>multikaz('.$data["largeur"].','.$data["hauteur"].');</script>';
echo'</div>';//objet
}
}
echo'</div>';//objets
echo'</div>';//contenu

mysql_close();
?>
</body>
</html>


--------
objtes.css


.contenu {
width:100%;
height:100%;
border:1px solid red;


/* pour chrome, opera, safari sinon moz boz */
display:-webkit-box;
-webkit-box-pack:center; /*horizontal*/
-webkit-box-align:center; /*vertical*/
-webkit-box-orient:horizontal;
}

.box1 {
width:70%;
height:100%;
border:1px solid blue;

/* pour chrome, opera, safari sinon moz boz */
display : -webkit-box;
-webkit-box-align: center; /*horizontal*/
-webkit-box-pack: center;/*vertical*/
}

.objets {
width:30%;
height:100%;
border:1px solid green;

/* pour chrome, opera, safari sinon moz boz */
display : -webkit-box;
-webkit-box-align:center; /*horizontal*/
-webkit-box-pack: center; /*vertical*/
-webkit-box-orient:vertical;
}