wake-up-neo.com

Wie erhalte ich die Koordinatenposition nach der Verwendung von jQuery Drag & Drop?

Wie erhalte ich die Koordinatenposition nach der Verwendung von jQuery Drag & Drop? Ich möchte die Koordinate in einer Datenbank speichern, damit sich der Artikel beim nächsten Besuch an dieser Position befindet. Zum Beispiel x: 520px, y: 300px?

BEARBEITEN:

Ich bin PHP und MySQL-Programmierer :)

Gibt es da draußen ein Tutorial?

38
michael

Ich habe so etwas gemacht (wenn ich dich richtig verstehe).

Ich benutze die Funktion position (), die in jQuery 1.3.2 enthalten ist.

Habe gerade ein Copy Paste und ein schnelles Tweak gemacht ... Sollte dir aber 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="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>
38
Cudos

Hatte das selbe Problem. Meine Lösung ist folgende:

$("#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;

    }
});
16
Webars

Keines der oben genannten hat bei mir funktioniert.

Hier ist meine Lösung - funktioniert hervorragend:

$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 auf einer teilweise abweichenden Lösung, die hier angegeben ist: https://stackoverflow.com/a/10429969/16567 )

8
Yarin

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));
    }
});
8
Sampath

Ich würde mit etwas wie this beginnen. Aktualisieren Sie das dann, um das Positions-Plugin zu verwenden, und das sollte Sie dahin bringen, wo Sie sein möchten.

2
TeckniX
$(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="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="../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>
2
Syahir Halim

Wenn Sie Dragstop oder andere Ereignisse anhören, sollte die ursprüngliche Position ein UI-Parameter sein:

dragstop: function(event, ui) {
    var originalPosition = ui.originalPosition;
}

Ansonsten glaube ich, ist der einzige Weg, es zu bekommen:

draggable.data("draggable").originalPosition

Wo ziehbar ist das Objekt, das Sie ziehen. Es wird nicht garantiert, dass die zweite Version in zukünftigen Versionen von jQuery funktioniert.

2
soney

Die von Cudos akzeptierte Antwort ist großartig. Das Draggable-Modul verfügt jedoch auch über ein "Drag" -Ereignis, das Ihnen die Position beim Ziehen mitteilt. Zusätzlich zu 'start' und 'stop' können Sie also das folgende Ereignis in Ihr Draggable-Objekt einfügen:

    // Drag current position of dragged image.
    drag: function(event, ui) {

        // Show the current dragged position of image
        var currentPos = $(this).position();
        $("div#xpos").text("CURRENT: \nLeft: " + currentPos.left + "\nTop: " + currentPos.top);

    }
1
moluv00

Ich musste die Startposition und die Endposition speichern. Diese Arbeit für mich:

    $('.object').draggable({
        stop: function(ev, ui){
            var position = ui.position;
            var originalPosition = ui.originalPosition;
        }
    });
1
Diego Mariano