soltar - jquery scroll to div

¿Cómo obtengo la posición de coordenada después de usar jQuery arrastrar y soltar?

Question

¿Cómo obtengo la posición de coordenada después de usar jQuery arrastrar y soltar? Quiero guardar la coordenada en una base de datos, para que la próxima vez que visite, el elemento esté en esa posición. Por ejemplo, x: 520px, y: 300px?

EDITAR:

Soy PHP y programador mysql :)

¿Hay algún tutorial por ahí?

Answer 1

Acabo de hacer algo así (si te entiendo correctamente).

Yo uso la función position () incluida en jQuery 1.3.2.

Acabo de hacer una copia pegada y un pellizco rápido ... Pero debería darte la idea.

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

Comenzaría con algo como this . Luego, actualiza eso para usar el complemento de posición y eso debería llevarte a donde quieres estar.

Answer 3

Esto funcionó para mí:

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

Answer 4

La respuesta aceptada de Cudos es genial. Sin embargo, el módulo Draggable también tiene un evento de "arrastre" que le indica la posición mientras arrastra. Por lo tanto, además de ''iniciar'' y ''detener'', puede agregar el siguiente evento dentro de su objeto Draggable:

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

Nada de lo anterior funcionó para mí.

Aquí está mi solución, funciona muy bien:

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

(Basado en parte de la solución dada aquí: https://.com/a/10429969/165673 )

Answer 6

Necesitaba guardar la posición inicial y la posición final. este trabajo para mi

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

Answer 7

Si está escuchando el final de carrera u otros eventos, la posición original debe ser un parámetro ui:

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

De lo contrario, creo que la única manera de conseguirlo es:

draggable.data("draggable").originalPosition

Donde se puede arrastrar es el objeto que está arrastrando. No se garantiza que la segunda versión funcione en futuras versiones de jQuery.

Answer 8

Tenía el mismo problema. Mi solución es la siguiente:

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