Enregistrer position éléments drag and drop jquery
Nesyou75
Bonjour les amis, me revoila a la rechecrche de solution,
Comme je suis débutant en JS j'utilise jquery et je galere quand meme!
J'ai fais une page dans laquelle il y a des éléments type imge que l''on peut déplacer dans une zone dropable chaque éléments a des attributs spécifiques ( class, id, alt, style) et incrémente des compteurs différents puis lors d'un click button j'utilise html2canvas qui me fait une image de la div dropable puis jspdf qui met l'image dans un pdf, ensuite toutes données renseignées, les compteurs ainsi que l'image et le PDF sont enregistrer dans la bdd mysql et ça fonctionne pas mal, certain sur ce forum mon deja donner un coup de main dailleurs, je les remercis encore.
Je souhaite faire évoluer encore cette outil en donnant la possibilité de modifier les créations des données et images et pdf.
Comme le titre l'indique je recheche a enregistrer la position x, y lors d'un click buton des éléments drag and drop en jquery dans mysql.
Il peut y avoir plusieurs éléments déplacés a l'aide du drag and drop en jquery, genre 10 éléments ou 50 éléments cela dépend.
Je soushaite si possible que la position soit enregister sur des attribut type class html exemple class="ui-removable"
Je souhaite donc enregistrer leurs positions, leurs attributs class, id, alt, style, noms avec extension type .png, .gif, .svg ou .jpg le chemin type src="images/...".
Tout ça pour pouvoir retrouver tout les éléments précedement enregistrer a la meme position lors d'un click bouton.
Ce click boutton ouvrira une page avec une zone dropable dans laquelle les éléments (images) récuperer depuis mysql seront a leurs place avec leurs attributs class id alt src et style.
Voici quelques éléments déplacable avant le déplacement:
<div><img id="paper1" style="width:26px;height:64px" class="ui-widget-content elementRotate TrgtPaper" src="images/IPSC_Mini_Target.png" title="mini target ipsc" alt="minitarget"> </div>
<img id="metal1" class="ui-widget-content elementRotate TrgtPopper" src="images/IPSC_miniPopper.svg" title="Mini popper" alt="minipopper">
<img id="decor8" class="ui-widget-content elementRotate" src="images/Panneau_tsv1.svg" width="150" title="Panneausvg" alt="Panneausvg">Voici un élément apres déplacement dans la zone dropable:
<img style="width: 26px; height: 64px; position: absolute; left: 609px; top: 254.719px;" class="elementRotate TrgtPaper ui-draggable ui-draggable-dragging ui-removable" src="images/IPSC_Mini_Target_iso1.png" title="mini target ipsc" alt="minitarget">Voici la fonction qui recupere le tout vers un fichier php pour l'enregistrement(ce script est dans la meme page que les éléments)
<script>
//script pour capturer l'image du stage
function uploadFile() {
window.scrollTo(0, 0); //scroll page entiere du haut en bas
html2canvas(document.getElementById("main"),{scale: 2}).then(function(canvas){ //creation image avec scale: 2-> qualité X2
var doc = new jsPDF();
// doc.setFontSize(40); //taille titre
// doc.text(40, 25, "TSV STAGE MAKER") // titre
doc.addImage(canvas.toDataURL("image/jpeg", 0.9), 'JPEG', 5, 10, 200, 310); //'JPEG', 15(Gauche), 10 (Haut), 180 (Droite), 280 (Bas)
var blob = doc.output('blob');
var image = ("image=" + canvas.toDataURL("image/jpeg", 0.9));
var nomstage = document.querySelector('[name="nomstage"]');
var numstage = document.querySelector('[name="numstage"]');
var TrgtTypeId = document.querySelector('[name="TrgtTypeId"]');
var ScoringId = document.querySelector('[name="ScoringId"]');
var StartOn = document.querySelector('[name="StartOn"]');
// var StartPos = document.getElementById("StartPos");
var StartPos = document.querySelector('[name="StartPos"]');
var Descriptn = document.getElementById("Descriptn");
var CourseId = document.querySelector('[name="CourseId"]');
var matchsid = document.querySelector('[name="matchsid"]');
var MaxPoints = document.querySelector('[name="MaxPoints"]');
var MinRounds = document.querySelector('[name="MinRounds"]');
var TrgtPaper = document.querySelector('[name="TrgtPaper"]');
var TrgtPlates = document.querySelector('[name="TrgtPlates"]');
var TrgtPenlty = document.querySelector('[name="TrgtPenlty"]');
var TrgtPopper = document.querySelector('[name="TrgtPopper"]');
var bobber = document.getElementById("bobber");
var StringCnt = document.querySelector('[name="StringCnt"]');
var ReportOn = document.querySelector('[name="ReportOn"]');
var formData = new FormData();
formData.append('pdf', blob);
formData.append('jpeg', image);
formData.append('nomstage', nomstage.value);
formData.append('numstage', numstage.value);
formData.append('TrgtTypeId', TrgtTypeId.value);
formData.append('ScoringId', ScoringId.value);
formData.append('StartOn', StartOn.value);
formData.append('StartPos', StartPos.innerText);
formData.append('Descriptn', Descriptn.value);
formData.append('CourseId', CourseId.value);
formData.append('matchsid', matchsid.value);
formData.append('MaxPoints', MaxPoints.innerText);
formData.append('MinRounds', MinRounds.innerText);
formData.append('TrgtPaper', TrgtPaper.innerText);
formData.append('TrgtPlates', TrgtPlates.innerText);
formData.append('TrgtPenlty', TrgtPenlty.innerText);
formData.append('TrgtPopper', TrgtPopper.innerText);
formData.append('bobber', bobber.innerText);
formData.append('StringCnt', StringCnt.value);
formData.append('ReportOn', ReportOn.value);
console.log(formData);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
alertify.success('Stage successfully saved');
return;
}
}
xhr.open('post', '/save-capture.php');
xhr.send(formData);
});
}
</script>Voici les fonctions pour le drag and drop et les compteurs (une partie) qui se trouve pas dans le meme fichier que les éléments et la partie ajax:
$(document).ready(function() { //fonction qui exectute le script
//console.log(document);
var nbcoup = 0; //Nombre de coup
document.getElementById("nbcp").innerText = nbcoup;
var pts = 0; //Nombre de points
document.getElementById("point").innerText = pts;
var pap = 0; //Nombre de cible papier
document.getElementById("papier").innerText = pap;
var met = 0; //Nombre de métal
document.getElementById("metal").innerText = met;
var minipap = 0; //Nombre de cible papier
document.getElementById("minipapier").innerText = minipap;
var minimet = 0; //Nombre de métal
document.getElementById("minimetal").innerText = minimet;
var plt = 0; //Nombre de métal poper
document.getElementById("plate").innerText = plt;
var bob = 0; //Nombre de métal minipoper
document.getElementById("bobber").innerText = bob;
var nosh = 0; //Nombre de noshoot
document.getElementById("targetNS").innerText = nosh;
var n = 0;
var p = 0;
$('.ui-widget-content').draggable({ //fonction qui rend les elements draggable
helper: 'clone',
cursor: 'move',
scope: "#paper , #metal , #decor",
grid: [2, 1],
$("#dropzone").droppable({ //fonction qui rend la zone droppable
//accept: "#objet1, #objet2 , #objet3 , #objet4",
scope: "#paper , #metal , #decor",
drop: function(event, ui) { //fonction qui gere les evenements de drop
if (ui.draggable.attr("alt") == "popper") {
n = 1;
p = 5;
met++;
} else if (ui.draggable.attr("alt") == "minipopper") {
n = 1;
p = 5;
minimet++;
} else if (ui.draggable.attr("alt") == "plate") {
n = 1;
p = 5;
plt++;
} else if (ui.draggable.attr("alt") == "target") {
n = 2;
p = 10;
pap++;
} else if (ui.draggable.attr("alt") == "minitarget") {
n = 2;
p = 10;
minipap++;
} else if (ui.draggable.attr("alt") == "bobber") {
n = 2;
p = 10;
bob++;
} else if (ui.draggable.attr("alt") == "targetNS") {
n = 0;
p = 0;
nosh++;
} else {
n = 0;
p = 0;
}
nbcoup = nbcoup + n;
pts = pts + p;
document.getElementById("nbcp").innerText = nbcoup; //ligne qui pemettent d'écrire dans le tableau en positif
document.getElementById("point").innerText = pts;
document.getElementById("metal").innerText = met;
document.getElementById("papier").innerText = pap;
document.getElementById("minimetal").innerText = minimet;
document.getElementById("minipapier").innerText = minipap;
document.getElementById("plate").innerText = plt;
document.getElementById("bobber").innerText = bob;
document.getElementById("targetNS").innerText = nosh;
var redrag = $(ui.helper).clone().removeClass('ui-widget-content') //variable qui enleve la class du l'élément cloné et qui redonne la fontion draggable aux clones
redrag.draggable({
containment: 'parent',
cursor: 'move',
grid: [2, 2],
snap: true,
snapTolerance: 5,
});
$(this).append(redrag);
$("img").click(function() { //fonction qui permet de rendre draggable des elements inseré dans la zone dropzone
var maxZindex = 0;
$("img").each(function() {
var z = parseInt($(this).css('z-index'));
if (isNaN(z)) z = 0;
if (z > maxZindex) maxZindex = z;
});
//assign a z-index greater than the current max to the clicked item
$(this).css('z-index', maxZindex + 1);
});
if ( $(this).find('img').addClass("ui-removable") ) { //fonction qui permet d'ajouter une class pour le supprimer
};1 mais en méthode formdata comme juste au dessus plutot que la méthode ci-dessous avec push, data, json..
2 la partie JS qui gere la partie drag and drop et compteurs ce trouve dans une autre fichier JS, ce sui me pose probleme pour la partie ajax!
J'ai éfféctuer quelques tests en mettant tout sur la meme page et je souhaite adapter ce test qui fonctionne a ma page ave cles réells éléments
Partie html du test
<!-- div dropable avec éléments draggable -->
<div id="glassbox">
<img id="paper1" style="width:26px;height:64px" class="ui-widget-content elementRotate TrgtPaper" src="images/IPSC_Mini_Target.png" title="mini target ipsc" alt="minitarget">
<img id="metal1" class="ui-widget-content elementRotate TrgtPopper" src="images/IPSC_miniPopper.svg" title="Mini popper" alt="minipopper">
<img id="decor8" class="ui-widget-content elementRotate" src="images/declencheur.png" width="70" title="Déclencheur" title="Fleche" alt="declencheur">
</div>
<div id="respond"></div>Partie PHP du test
<!-- div dropable avec éléments draggable -->
<div id="glassbox">
<?php
$get_coords = $bdd->query("SELECT * FROM coords");
while ($row = $get_coords->fetch()) {
$x = $row['x_pos'];
$y = $row['y_pos'];
$src = $row['srcImg'];
$class = $row['classImg'];
$id = $row['idImg'];
$alt = $row['altImg'];
$style = $row['styleImg'];
//then echo our div element with CSS properties to set the left(x) and top(y) values of the element
echo '<div id='.$id.' class='.$class.' style='.$style.'"><img src='.$src.' alt='.$alt.'><p></p></div>';
}?>
</div>
<div id="respond"></div>partie JS du test
<script type="text/javascript">
$(document).ready(function() {
$(".ui-widget-content").draggable({
containment: '#glassbox',
scroll: false
})
.mousemove(function(){
var coord = $(this).position();
$("img:last").text( "left: " + coord.left + ", top: " + coord.top );
})
.mouseup(function(){
var coords=[];
var coord = $(this).position();
var srcElem = $(this).attr("src");
var classElem = $(this).removeClass("ui-draggable ui-draggable-dragging");
var classElemOK = $(this).attr("class");
var idElem = $(this).attr("id");
var altElem = $(this).attr("alt");
var styleElem = $(this).attr("style");
var item={
coordTop: coord.left,
coordLeft: coord.top,
srcElem,
classElemOK,
idElem,
altElem,
styleElem
};
console.log(item);
coords.push(item);
var order = { coords: coords };
$.post('updatecoords.php', 'data='+$.toJSON(order), function(response){
if(response=="success")
$("#respond").html('<div class="success">X and Y Coordinates Saved!</div>').hide().fadeIn(1000);
setTimeout(function(){ $('#respond').fadeOut(1000); }, 2000);
});
});
});
</script>