Jak uzyskać położenie współrzędnych po użyciu metody przeciągnij i upuść jQuery?

Question

Jak uzyskać położenie współrzędnych po użyciu metody przeciągnij i upuść jQuery? Chcę zapisać współrzędne do bazy danych, aby następnym razem, gdy odwiedzę, pozycja będzie na tej pozycji. Na przykład x: 520px, y: 300px?

EDIT:

Jestem programista PHP i MySQL :)

Czy istnieje samouczek tam?

Answer 1

Zacznę od czegoś takiego jak this. Następnie zaktualizuj to, aby użyć funkcji position plugin , która powinna zapewnić Ci to, gdzie chcesz być.

Answer 2

Po prostu zrobiłem coś takiego (jeśli dobrze cię rozumiem).

Używam funkcji position() include w jQuery 1.3.2.

Po prostu skopiowałam pastę i szybko poprawiłam ... Ale powinien dać ci pomysł.

// 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> 

Answer 3

Jeśli słuchasz dragstop lub innych wydarzeń, oryginalna pozycja powinna być parametrem ui:

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

W przeciwnym razie, uważam, że jedynym sposobem na to jest:

draggable.data("draggable").originalPosition 

Gdzie przeciągany jest obiekt, który przeciągasz. Druga wersja nie gwarantuje działania w przyszłych wersjach jQuery.

Answer 4

Przyjęta odpowiedź Cudos jest świetna. Jednak moduł przeciągania ma również zdarzenie "przeciągnij", które informuje o pozycji podczas przeciągania. Tak więc, oprócz „Start” i „STOP” można dodać następujące zdarzenie w swoim Draggable obiektu:

// 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); 

    } 

Answer 5

Ten pracował dla mnie:

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

Answer 6

miał ten sam problem. Moje rozwiązanie jest następujące:

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

    } 
}); 

Answer 7

Potrzebowałem zapisać pozycję początkową i pozycję końcową. to praca dla mnie:

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

Answer 8

Żadne z powyższych nie działało dla mnie.

Oto mój Roztwór podstawowy działa świetnie:

$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); 

(oparty częściowo wyłączyć rozwiązania danego tutaj: https://stackoverflow.com/a/10429969/165673)

Answer 9

$(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>