Witajcie moi stackoverflow przyjaciele. Mam dziś pewne problemy i potrzebuję twojej pomocy, aby je rozwiązać. Jeśli możesz w czymkolwiek pomóc, byłoby to bardzo cenne! Ponieważ naprawdę muszę dokończyć ten projekt.
JSFiddle: https://jsfiddle.net/rdxmmobe/1/
Jest to scenariusz:Przeciąganie i upuszczanie problemów z pozycjonowaniem + aktualizowanie identyfikatora
<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>
Są to 7 DIV droppable (gdzie można upuścić obrazy):
<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>
I są to przeciągalne obrazy (obrazy, które można przeciągnąć), które pochodzą z fr om bazie danych i mają id różne to:
<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>
Jest to kod 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>";
}
Pierwszy problem: Jak widać w moim skrypcie powyżej użyłem " helper: "klon", ale obrazy
z klasą ".DraggedItem" są przenoszone i nie o to chodzi. Obrazy powinny zostać przeniesione i zastąpione przez 7 elementów div. Ale oni mają być sklonowane z oryginalnej listy (więc mogę korzystać z tego samego ikonę dwukrotnie np)
Drugi problem: mam ukryte wejście do każdego div i muszą zawierać id
spadła obrazu więc mogę wstawić je do bazy danych. Powiedzmy, że upuściłem obraz Div1 (# rang1), a następnie przeniosłem obraz do Div4 (# rang4), id obrazu pozostaje na ukrytym wejściu Div1 i nie zostaje usunięty/zaktualizowany. Jak mogę się upewnić, że identyfikator zostanie również zaktualizowany po upuszczeniu nowego obrazu na div?
Trzeci problem: Jak mogę sprawdzić, kiedy upuszczam obraz z głównej listy, że jeśli jest już obraz, stary obraz zostanie usunięty i zastąpiony przez nowy?
czwarte Problem:, co jest najlepszym sposobem, aby przełączać się między 2 zdjęcia?
Jeśli możesz mi pomóc z któregokolwiek z tych problemów to mogłoby być znacznie ceniona !! Nie mogę pójść dalej bez rozwiązania tych problemów i naprawdę potrzebuję pomocy ekspertów.
Budowanie jsFiddle przetestować. Chcesz przeciągnąć i upuścić klon do jednego z 7 miejsc? http://jqueryui.com/draggable/#snap-to – Twisty
@ Twisty Zbuduję przykład w jsFiddle, poczekaj na pls :) –
@ Twisty Zaktualizowałem pytanie. Nad pytaniem pojawi się wersja demonstracyjna. –