wake-up-neo.net

So ermitteln Sie die Position eines ziehbaren Objekts

Ich versuche, das x und y des ziehbaren Objekts mit JQuery zu ermitteln.

Das Szenario ist, dass ich ein Objekt auf ein anderes Objekt ziehe und dort ablege und die Position des Drag & Drop-Objekts ermitteln möchte. Bearbeiten: Jetzt kann ich die Position des Objekts abrufen, aber ich brauche mehr:

Folgendes habe ich versucht:

<script>
    $(function() {
        $('#draggable').draggable(
{
    drag: function() {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $(this).text('x: ' + xPos + 'y: ' + yPos);

    }
});
        $("#droppable").droppable({
            drop: function(event, ui) {
                $(this)
                .addClass("ui-state-highlight")
                .find("p")
                    .html("Dropped!");
            }
        });
    });
</script>

Jetzt kann ich die Position des ziehbaren Objekts abrufen, muss aber in der Größe veränderbar sein. Zusätzlich zum Abrufen von x, y des ziehbaren Objekts benötige ich auch die Größe des Objekts.

Jede Hilfe wäre toll!

Vielen Dank.

28
Pabuc

Sie können das Ereignis drag verwenden:

$('#dragThis').draggable({
    drag: function() {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#posX').text('x: ' + xPos);
        $('#posY').text('y: ' + yPos);
    }
});

JS Fiddle Demo .

Diese Demo wurde Ihnen von drag event und den Methoden offset() und text() zur Verfügung gestellt.


Editierte als Antwort auf einen Kommentar vom OP zur ursprünglichen Frage:

David, eigentlich brauche ich etwas komplizierter, aber du könntest großartige Hilfe leisten. Ich möchte ein ziehbares Objekt und ein abwerfbares Bild in ein Bedienfeld einfügen und das ziehbare Objekt auf das Bild ziehen und die Position ermitteln, an der es abgelegt wurde. Ich brauche auch das verschiebbare Objekt, um seine Größe zu verändern, und bekomme am Ende auch die Größe davon :) Danke 

... äh, whoah...

Ich denke diese Art deckt die Grundlagen dessen ab, was gefragt wird:

$('#dragThis').draggable( {
    containment: $('body'),
    drag: function() {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#posX').text('x: ' + xPos);
        $('#posY').text('y: ' + yPos);
    },
    stop: function() {
        var finalOffset = $(this).offset();
        var finalxPos = finalOffset.left;
        var finalyPos = finalOffset.top;

        $('#finalX').text('Final X: ' + finalxPos);
        $('#finalY').text('Final X: ' + finalyPos);
    },
    revert: 'invalid'
});

$('#dropHere').droppable({
    accept: '#dragThis',
    over: function() {
        $(this).animate({
            'border-width': '5px',
            'border-color': '#0f0'
        }, 500);
        $('#dragThis').draggable('option', 'containment', $(this));
    }
});

Aktualisiertes JS Fiddle Demo .

Neu aktualisierte JS Fiddle -Demo mit revert: invalid , so dass das ziehbare div an einer beliebigen Stelle abgelegt wird but das abwerfbare div bewirkt, dass sich das ziehbare div an seine Startposition zurückbewegt. Wenn das wert wäre. Oder überhaupt gewünscht ...

Ich denke nicht, dass dies möglich ist, da das draggable-Objekt ebenfalls resizable ist, da sowohl draggable() als auch resizable() auf die same-Interaktion reagieren. Es ist vielleicht in gewisser Weise möglich, aber ich befürchte, dass es derzeit nicht für mich ist.


Editiert um die 'height/width'-Anforderung hinzuzufügen, und um ein paar Dinge aufzuräumen und das CSS zu verbessern. Das gesagt:

HTML:

<div id="dragThis">
    <ul>
        <li id="posX">x: <span></span></li>
        <li id="posY">y: <span></span></li>
        <li id="finalX">Final X: <span></span></li>
        <li id="finalY">Final Y: <span></span></li>
        <li id="width">Width: <span></span></li>
        <li id="height">Height: <span></span></li>
    </ul>
</div>

<div id="dropHere"></div>

CSS:

#dragThis {
    width: 8em;
    height: 8em;
    padding: 0.5em;
    border: 3px solid #ccc;
    border-radius: 0 1em 1em 1em;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.5);
}

#dragThis span {
    float: right;
}

#dragThis span:after {
    content: "px";
}

li {
    clear: both;
    border-bottom: 1px solid #ccc;
    line-height: 1.2em;
}

#dropHere {
    width: 12em;
    height: 12em;
    padding: 0.5em;
    border: 3px solid #f90;
    border-radius: 1em;
    margin: 0 auto;
}

jQuery:

$('#dragThis').draggable({
    containment: $('body'),
    drag: function() {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#posX > span').text(xPos);
        $('#posY > span').text(yPos);
    },
    stop: function() {
        var finalOffset = $(this).offset();
        var finalxPos = finalOffset.left;
        var finalyPos = finalOffset.top;

        $('#finalX > span').text(finalxPos);
        $('#finalY > span').text(finalyPos);
        $('#width > span').text($(this).width());
        $('#height > span').text($(this).height());
    },
    revert: 'invalid'
});

$('#dropHere').droppable({
    accept: '#dragThis',
    over: function() {
        $(this).animate({
            'border-width': '5px',
            'border-color': '#0f0'
        }, 500);
        $('#dragThis').draggable('option', 'containment', $(this));
    }
});

JS Fiddle Demo der oben genannten .

70
David Thomas

Sie können eine davon probieren:

$(this).position()

oder

$(this).offset()

Mit der .position()-Methode können wir die aktuelle Position eines Elements relativ zum übergeordneten Versatz abrufen. Vergleichen Sie dies mit .offset(), die die aktuelle Position relativ zum Dokument abruft.

Von http://api.jquery.com/position/

12
user603881

Sie können die Breite mit .resizable () ausgeben und das Ereignis stoppen. Versuchen Sie Folgendes hinzuzufügen:

$('#dragThis').resizable({ handles: "e, w",      
      stop: function(event, ui) {
        var width = ui.size.width;
        var height = ui.size.height;
    $('#width > span').text($(this).width());
    $('#height > span').text($(this).height());
      }
   });
0
Colton Gwinn