Wie erhalte ich die Koordinatenposition, nachdem ich jQuery Drag & Drop verwendet habe?
Lesezeit: 5 Minuten
Wie erhalte ich die Koordinatenposition, nachdem ich jQuery Drag & Drop verwendet habe? Ich möchte die Koordinate in einer Datenbank speichern, damit sich der Artikel beim nächsten Besuch an dieser Position befindet. Beispiel: x: 520 Pixel, y: 300 Pixel?
BEARBEITEN:
Ich bin PHP- und MySQL-Programmierer 🙂
Gibt es da ein Tutorial?
Ich habe gerade so etwas gemacht (wenn ich dich richtig verstehe).
Ich verwende die Funktion position() include in jQuery 1.3.2.
Ich habe gerade eine Kopie eingefügt und eine schnelle Optimierung vorgenommen … Aber sollte Ihnen die Idee geben.
// Make images draggable.
$(".item").draggable({
// Find original position of dragged image.
start: function(event, ui) {
// Show start dragged position of image.
var Startpos = $(this).position();
$("div#start").text("START: nLeft: "+ Startpos.left + "nTop: " + Startpos.top);
},
// Find position where image is dropped.
stop: function(event, ui) {
// Show dropped position.
var Stoppos = $(this).position();
$("div#stop").text("STOP: nLeft: "+ Stoppos.left + "nTop: " + Stoppos.top);
}
});
<div id="container">
<img id="productid_1" src="https://stackoverflow.com/questions/849030/images/pic1.jpg" class="item" alt="" title="" />
<img id="productid_2" src="images/pic2.jpg" class="item" alt="" title="" />
<img id="productid_3" src="images/pic3.jpg" class="item" alt="" title="" />
</div>
<div id="start">Waiting for dragging the image get started...</div>
<div id="stop">Waiting image getting dropped...</div>
Ich habe dies gerade verwendet, um die Verbesserung durch Droppable-Anwendung zu unterstützen, vielen Dank!
– Pez Cuckow
4. Juni 10 um 12:47 Uhr
Funktioniert das wirklich bei irgendjemandem?? Damit hatte ich kein Glück. Siehe meine Antwort für eine Lösung, die funktioniert.
– Jarin
19. Dezember 13 um 3:29 Uhr
Hatte das gleiche Problem. Meine Lösung ist die nächste:
$("#element").droppable({
drop: function( event, ui ) {
// position of the draggable minus position of the droppable
// relative to the document
var $newPosX = ui.offset.left - $(this).offset().left;
var $newPosY = ui.offset.top - $(this).offset().top;
}
});
Ich habe Schwierigkeiten, dies zu verstehen. Können Sie bitte erklären, was “ui” und was “this” ist? Achtung: Diese Lösung hat bei mir funktioniert.
– jumpa
18. Juni 12 um 18:13 Uhr
Aus der jQuery-UI-Dokumentation: „Alle Rückrufe erhalten zwei Argumente: Das ursprüngliche Browserereignis und ein vorbereitetes UI-Objekt: 1) ui.draggable – aktuelles ziehbares Element, ein jQuery-Objekt; 2) ui.helper – aktueller ziehbarer Helfer, ein jQuery-Objekt; 3) ui.position – aktuelle Position des ziehbaren Helfers { top: , left: } 4) ui.offset – aktuelle absolute Position des ziehbaren Helfers { top: , left: } .
– Arsen K.
1. Juli 12 um 10:46 Uhr
Danke Mann, ich hatte Mühe, bis ich deine Lösung gefunden habe. Das hilft mir wirklich.
– przbadu
20. September 14 um 11:08 Uhr
Das war die ideale Lösung, die ich gesucht habe. Einfach und unkompliziert.
– S.Dan
25. Oktober 16 um 6:21 Uhr
Yarin
Keines der oben genannten hat bei mir funktioniert.
Hier ist meine Lösung – funktioniert super:
$dropTarget.droppable({
drop: function( event, ui ) {
// Get mouse position relative to drop target:
var dropPositionX = event.pageX - $(this).offset().left;
var dropPositionY = event.pageY - $(this).offset().top;
// Get mouse offset relative to dragged item:
var dragItemOffsetX = event.offsetX;
var dragItemOffsetY = event.offsetY;
// Get position of dragged item relative to drop target:
var dragItemPositionX = dropPositionX-dragItemOffsetX;
var dragItemPositionY = dropPositionY-dragItemOffsetY;
alert('DROPPED IT AT ' + dragItemPositionX + ', ' + dragItemPositionY);
(Basierend teilweise auf der hier angegebenen Lösung: https://stackoverflow.com/a/10429969/165673)
Klappt wunderbar. Danke
– SaiKiran Mandala
24. Mai 16 um 13:34 Uhr
Können Sie bitte sagen, welche Einheit wir dafür verwenden müssen?
Wenn Sie den Dragstop oder andere Ereignisse hören, sollte die ursprüngliche Position ein ui-Parameter sein:
dragstop: function(event, ui) {
var originalPosition = ui.originalPosition;
}
Ansonsten glaube ich, dass der einzige Weg, es zu bekommen, ist:
draggable.data("draggable").originalPosition
Wobei ziehbar das Objekt ist, das Sie ziehen. Es wird nicht garantiert, dass die zweite Version in zukünftigen Versionen von jQuery funktioniert.
Erwartet Qarni
Ich würde mit sowas anfangen Dies. Aktualisieren Sie diese dann, um die zu verwenden Positions-Plugin
und das sollte dich dorthin bringen, wo du sein möchtest.