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

Wie erhalte ich die Koordinatenposition nachdem ich jQuery Drag
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?

    – Suhail Kakar

    25. Juli 21 um 16:53 Uhr

1643262066 694 Wie erhalte ich die Koordinatenposition nachdem ich jQuery Drag
Sampath

Das hat bei mir funktioniert:

$("#element1").droppable(
{
    drop: function(event, ui)
    {
        var currentPos = ui.helper.position();
            alert("left="+parseInt(currentPos.left)+" top="+parseInt(currentPos.top));
    }
});

1643262066 778 Wie erhalte ich die Koordinatenposition nachdem ich jQuery Drag
soso

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.

Wie erhalte ich die Koordinatenposition nachdem ich jQuery Drag
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.

1643262067 613 Wie erhalte ich die Koordinatenposition nachdem ich jQuery Drag
Syahir Halim

$(function() 
  {
    $( "#element" ).draggable({ snap: ".ui-widget-header",grid: [ 1, 1 ]});
  });
    $(document).ready(function() {
        $("#element").draggable({ 
                containment: '#snaptarget', 
                scroll: false
         }).mousemove(function(){
                var coord = $(this).position();
                var width = $(this).width();
               var height = $(this).height();
                $("p.position").text( "(" + coord.left + "," + coord.top + ")" );
                $("p.size").text( "(" + width + "," + height + ")" );
         }).mouseup(function(){
                var coord = $(this).position();
                var width = $(this).width();
                var height = $(this).height();
                $.post('/test/layout_view.php', {x: coord.left, y: coord.top, w: width, h: height});
               
                });
        });
#element {background:#666;border:1px #000 solid;cursor:move;height:110px;width:110px;padding:10px 10px 10px 10px;}
#snaptarget { height:610px; width:1000px;}
.draggable { width: 90px; height: 80px; float: left; margin: 0 0 0 0; font-size: .9em; }
.wrapper
{ 
background-image:linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
height:100%;
background-size:45px 45px;
border: 1px solid black;
background-color: #434343;
margin: 20px 0px 0px 20px;
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Layout</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://stackoverflow.com/themes/default/css/test4.css" type="text/css" charset="utf-8"/>
    <script src="../themes/default/js/layout.js"></script>
  </head>
<body>
    <div id="snaptarget" class="wrapper">
        <div id="element" class="draggable ui-widget-content">
          <p class="position"></p>
          <p class="size"></p>
        </div>
    </div> 
    <div></div>
</body>
</html>

  • Das ist großartig, ist es in Pixeln?

    – fast ein Anfänger

    25. November 16 um 8:38 Uhr


.

656320cookie-checkWie erhalte ich die Koordinatenposition, nachdem ich jQuery Drag & Drop verwendet habe?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy