2016-05-03 7 views
1

Ich arbeite an einem Drag & Drop, wo, wenn Sie das Objekt in den DropPable-Bereich ziehen das Objekt die Bewegung Bewegung, die Sie in den negativen Bereich als eine negative Positionierung gegeben.Drag & Drop eine negative Position anwenden

Um dies zu veranschaulichen, habe ich diese JSFiddle zusammengestellt, wo Sie einen niedlichen Hund in die Landschaft fallen lassen können, um mein Problem zu veranschaulichen. Code verwendet unter:

//DRAG & DROP 
$(document).ready(
    function() { 
     var a = 3; 
     $('.drag').draggable({ 
     revert: 'invalid', 
     cursor: 'move', 
     //containment: '#drop', 
     start: function(event,ui) { $(this).css("z-index", a++)} 
     }); 

     $('#drop').droppable({ 
     accept: ".drag", 
     drop: function(event, ui) { 
      console.log(this); 

      //$(this).addClass('dropped'), 
      $(this).append(ui.draggable); 
     } 
     }); 
}); 

ich viel lesen, auf sie über Methoden getan haben, dieses Problem zu beheben, von denen viele scheinen zu gehören variable Fehler Eindämmung, aber leider habe ich kein Glück Umsetzung diejenigen hatten behebt mein eigenes Setup hier. Eine Sache zu beachten ist, dass ich HTML2CANVAS verwende, um Aufnahmen dieses #drop-Bereichs zu exportieren, so dass ich sicherstellen muss, dass sich das verschobene Element physisch im Raum befindet. Irgendwelche Vorschläge würden geschätzt werden.

Vielen Dank im Voraus!

+0

ist [diese] (https://jsfiddle.net/arj_dev/f7fzwpkL/1/) was Sie wollen? – ArJ

+0

In dem Sinne, dass der Hund sichtbar bleibt, ja. Das Problem mit diesem Ergebnis ist, dass der Hund im ursprünglichen Raumcode verbleibt und nicht in den # Tropfen-Raum eingefügt wird. Ohne sich physisch in dem Drop-Space zu befinden, wird das HTML2CANVAS, das ich erwähnte, sein Bild nicht erfassen. – Cutter

+0

Wenn Sie nach dem Ablegen auf der Leinwand zeichnen möchten, können Sie die Mauskoordinate auf der Zeichenfläche erkennen und dann das Bild auf der Zeichenfläche an dieser Position vom Ereignishandler ** drop ** zeichnen. Wenn es das ist, was du willst, dann kann ich es mit einer Geige versuchen. – ArJ

Antwort

0

Aktualisierung; Ich konnte das lösen, indem ich eine absolute Positionierung erzwang. Nicht reagierend, aber ich bin nicht 100% sicher, dass ich es für diese Instanz brauche.