Ciao amici my stackoverflow. Oggi ho alcuni problemi e ho bisogno del tuo aiuto per risolverli. Se puoi aiutare con qualcosa, sarebbe molto apprezzato! Perché ho veramente bisogno di finire questo progetto.
JSFiddle: https://jsfiddle.net/rdxmmobe/1/
Questo è lo script:Drag and drop problemi di posizionamento + aggiornamento dell'id
<script type="text/javascript">
$(function(){
$(".DraggedItem").draggable({
helper:'clone',
cursor:'move',
opacity: 0.7
});
$('#rang1').droppable({
drop: function(ev, ui) {
$('#rang1input').val($(ui.draggable).attr('id'));
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}
});
$('#rang2').droppable({
drop: function(ev, ui) {
$('#rang2input').val($(ui.draggable).attr('id'));
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}
});
$('#rang3').droppable({
drop: function(ev, ui) {
$('#rang3input').val($(ui.draggable).attr('id'));
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}
});
$('#rang4').droppable({
drop: function(ev, ui) {
$('#rang4input').val($(ui.draggable).attr('id'));
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}
});
$('#rang5').droppable({
drop: function(ev, ui) {
$('#rang5input').val($(ui.draggable).attr('id'));
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}
});
$('#rang6').droppable({
drop: function(ev, ui) {
$('#rang6input').val($(ui.draggable).attr('id'));
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}
});
$('#rang7').droppable({
drop: function(ev, ui) {
$('#rang7input').val($(ui.draggable).attr('id'));
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}
});
});
</script>
Questi sono i 7 div droppable (in cui è possibile rilasciare le immagini):
<form action="<?php echo $_SERVER["PHP_SELF"] ?>" method="POST">
<input type="hidden" value="<?php echo $row["IDBewoner"] ?>" name="bewoner">
<td>
<div id="rang1"></div>
<input type="hidden" value="" id="rang1input" name="rang1value">
</td>
<td>
<div id="rang2"></div>
<input type="hidden" value="" id="rang2input" name="rang2value">
</td>
<td>
<div id="rang3"></div>
<input type="hidden" value="" id="rang3input" name="rang3value">
</td>
<td>
<div id="rang4"></div>
<input type="hidden" value="" id="rang4input" name="rang4value">
</td>
<td>
<div id="rang5"></div>
<input type="hidden" value="" id="rang5input" name="rang5value">
</td>
<td>
<div id="rang6"></div>
<input type="hidden" value="" id="rang6input" name="rang6value">
</td>
<td>
<div id="rang7"></div>
<input type="hidden" value="" id="rang7input" name="rang7value">
</td>
<input type="submit" value="Save">
</form>
E queste sono le immagini trascinabili (immagini che puoi trascinare) vengono da fr om un database e hanno diverse id:
<td> <?php echo "<img class='DraggedItem' id='".$row["IDPictogram"]."' src='data:image/jpeg;base64,".base64_encode($row['Pictogram'])."' width='90' height='90' draggable='true'>"; ?> </td>
Questo è il codice php:
if($_SERVER["REQUEST_METHOD"] == "POST") {
$rang1 = $_POST["rang1value"];
$rang2 = $_POST["rang2value"];
$rang3 = $_POST["rang3value"];
$rang4 = $_POST["rang4value"];
$rang5 = $_POST["rang5value"];
$rang6 = $_POST["rang6value"];
$rang7 = $_POST["rang7value"];
$bewonerID = $_POST["bewoner"];
echo "<script>alert('Rang1: $rang1')</script>";
echo "<script>alert('Rang2: $rang2')</script>";
echo "<script>alert('Rang3: $rang3')</script>";
echo "<script>alert('Rang4: $rang4')</script>";
echo "<script>alert('Rang5: $rang5')</script>";
echo "<script>alert('Rang6: $rang6')</script>";
echo "<script>alert('Rang7: $rang7')</script>";
}
Primo problema: come si può vedere nel mio script di cui sopra ho usato " helper: "clone" "ma le immagini
con la classe" .DraggedItem "vengono spostate e questo non è il punto. Le immagini dovrebbero essere spostate e sostituite tra le 7 div. Ma essi dovrebbero essere clonato dalla lista originale (modo da poter utilizzare la stessa icona due volte per esempio)
Secondo problema: Ho un input nascosto per ogni div e devono contenere l'id del
immagine caduto così posso inserirli in un database. Diciamo che ho lasciato cadere un'immagine su Div1 (# rang1) e poi ho spostato l'immagine su Div4 (# rang4), l'id dell'immagine rimane nell'input nascosto di Div1 e non viene cancellata/aggiornata. Come posso assicurarmi che l'ID venga aggiornato anche quando rilascio una nuova immagine sul div?
Terzo problema: come posso fare un controllo quando faccio cadere un'immagine dalla lista principale, che se c'è già un'immagine, la vecchia immagine viene cancellata e sostituita dalla nuova?
Quarto problema: qual è il modo migliore per passare da 2 immagini?
Se mi potete aiutare con qualsiasi di questi problemi sarebbe molto apprezzato !! Non posso andare oltre senza risolvere questi problemi e ho davvero bisogno di aiuto da parte di esperti.
Costruire un jsFiddle per testare. Stai cercando di trascinare un clone in uno dei 7 punti? http://jqueryui.com/draggable/#snap-to – Twisty
@Twisty Creerò un esempio in jsFiddle, aspetto i pls :) –
@Twisty Ho aggiornato la domanda. Vedrai una demo sopra la domanda. –