JQuery-UI draggable/droppable Springen

Question

Ich bin hier nicht neu im Code, aber dies ist meine erste Frage auf SO, also entschuldige mich nur dieses eine Mal, wenn meine Etikette nicht stimmt. Ich habe nach Unterstützung gesucht, aber anscheinend haben nicht viele Leute dieses Problem.

Ich spiele mit jQuery-UI für das Ziehen und Ablegen von Elementen herum, und größtenteils funktioniert es gut. Wenn ich jedoch etwas aus einem 'tabbed' div in einen abfallenden Bereich ziehe, springt es ein paar hundert Pixel darunter. Das ist besonders seltsam, weil ich es so eingestellt habe, dass es sich bei einem ungültigen Abwurf zurücksetzt, und das funktioniert, aber es ignoriert diese Regel beim ersten Abwurf, der es springen lässt. Ich bin mir nicht sicher, ob dies etwas mit der CSS-Position oder meinen UI-Attributen zu tun hat.

http://www.putoutsystems.com/jtest/

Klicken Sie auf den Verbraucher-Tab > ziehen Sie das Element in den Mülleimer. Sie sollte das von mir beschriebene Verhalten sehen. Ich verwende jQuery 1.10.2 und jQuery UI 1.10.4

Das ist der gesamte Code für die App:

    #potion { width: 24px; height: 24px; position:relative;}

    #tabs { width: 500px; height: 100px;}

    #droppable { width: 500px; height: 100px;}

    .inventoryTab { height: 40px; }

    //Funktionen
    $(function() {
        //Ziehbare Elemente
        $( ".draggable" ).draggable({ revert: "invalid"});

        //Hover-Text
         $( document ).tooltip();

        //Ablegbarer Bereich
         $( "#droppable" ).droppable({
              drop: function( event, ui ) {

                $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                    .html( "VOLL!" );
                $(ui.draggable).appendTo($(this));
              }
            });

        //Tab-Schnittstelle
        $( "#tabs" ).tabs();
    });

            Ausrüstung
            Verbrauchsmaterial
            Gegenstände

    Der MÜLL

        Leer!

UPDATE: Ich habe eine provisorische Lösung gefunden, die eine genaue Position festlegt, die ich anhand der Anzahl der Objekte im Behälter ändern könnte. Überprüfen Sie diesen Code für das Ablegen-Ereignis:

//Ablegbare Elemente
     $( "#droppable" ).droppable({
          drop: function( event, ui ) {

            $( this )
              .addClass( "ui-state-highlight" )
              .find( "p" )
                .html( "VOLL!" );
            $(ui.draggable).appendTo($(this));
            $(ui.draggable).css({
                 'top': '10px',
                 'left': '10px'
            });
          }
        });

Es wäre mir lieber, wenn das Objekt die Mausposition erhält, wenn es abgelegt wird, aber dort versagt mich derzeit mein jQuery. Ich werde weiter suchen.

JSFIDDLE

Answer 1

Es scheint, als ob du diese Zeile nicht brauchst $(ui.draggable).appendTo($(this));

//Funktionen
$(function () {
    //Ziehbare Elemente
    $(".draggable").draggable({
        revert: "invalid"
    });

    //Schwebender Text
    $(document).tooltip();

    //Abwurfelemente
    $("#droppable").droppable({
        drop: function (event, ui) {

            $(this)
                .addClass("ui-state-highlight")
                .find("p")
                .html("VOLL!");
            //$(ui.draggable).appendTo($(this)); // kommentiere dies aus
        }
    });

    //Tab-Schnittstelle
    $("#tabs").tabs();
});

JSFIDDLE DEMO