web-dev-qa-db-fra.com

Comment obtenir la position des coordonnées après avoir utilisé le glisser-déposer jQuery?

Comment obtenir la position des coordonnées après avoir utilisé le glisser-déposer jQuery? Je souhaite enregistrer les coordonnées dans une base de données, afin que la prochaine fois que je visite, l'élément soit dans cette position. Par exemple, x: 520px, y: 300px?

MODIFIER:

Je suis PHP et programmeur mysql :)

Existe-t-il un didacticiel?

jquerydrag-and-dropsaveposition
38
michael

Je viens de faire quelque chose comme ça (si je vous comprends bien).

J'utilise la fonction position () include dans jQuery 1.3.2.

Je viens de faire un copier-coller et un rapide Tweak ... Mais ça devrait vous donner l'idée.

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

Eu le même problème. Ma solution est la suivante:

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

Rien de ce qui précède n'a fonctionné pour moi.

Voici ma solution - fonctionne très 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);

(Basé sur une solution partiellement désactivée donnée ici: https://stackoverflow.com/a/10429969/16567 )

8
Yarin

Cela a fonctionné pour moi:

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

Je commencerais par quelque chose comme this . Ensuite, mettez à jour cela pour utiliser le position plugin et cela devrait vous amener là où vous voulez être.

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

Si vous écoutez le dragstop ou d'autres événements, la position d'origine doit être un paramètre ui:

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

Sinon, je crois que la seule façon de l'obtenir est:

draggable.data("draggable").originalPosition

Où glisser est l'objet que vous faites glisser. La deuxième version n'est pas garantie de fonctionner dans les futures versions de jQuery.

2
soney

La réponse acceptée par Cudos est excellente. Cependant, le module Draggable a également un événement "glisser" qui vous indique la position pendant votre glissement. Ainsi, en plus du "début" et du "arrêt", vous pouvez ajouter l'événement suivant dans votre objet déplaçable:

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

J'avais besoin de sauvegarder la position de départ et la position de fin. ce travail pour moi:

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