2009-07-15 7 views
0

Ist es möglich, die Rücksetzposition eines jQuery UI Draggable-Helfers zu bearbeiten? Zum Beispiel habe ich Symbole, auf die der Benutzer klicken und in Gruppen auf der Seite ziehen kann. Wenn der Benutzer auf ein Symbol klickt und mit dem Ziehen beginnt, wird eine Hilfsmitteilung direkt unter dem Cursor angezeigt und folgt dem Cursor, solange der Klick weiterhin erfolgt. Wenn der Helfer in eine Gruppe fällt, verschwindet er. Wenn der Helfer nicht in eine Gruppe fällt, kehrt er mit der Rückstellung zu seiner ursprünglichen Position zurück: 'ungültig'. Meine Frage ist, kann ich diese ursprüngliche Position des Helfers bearbeiten? Es scheint, immer wieder auf die absolute Position von links: 0 und top: 0, aber ich kann nicht herausfinden, wie diese Werte bearbeiten. Ich muss die Rückkehrposition bearbeiten, um ungefähr 300px mehr nach links zu sein.jQuery UI Draggables - Change Revert Position?

+1

[Diese] (http://Stackoverflow.com/a/16856831/830988) Antwort auf eine andere Frage macht genau das, was Sie wollen. Leider, für den Fragesteller der anderen Frage, tut es das Gegenteil von dem, was sie wollen. – Eva

Antwort

0

Sie können versuchen, das ziehbare Element neu zu positionieren, sobald der Ziehvorgang gestartet wurde. Wenn das Element freigegeben wird, wird es an die ursprüngliche Position zurückkehren und dann an die neue Position springen - ich habe nicht herausgefunden, wie ich das umgehen kann funktioniert

$(document).ready(function(){ 
$(".dragMe").draggable({ 
    helper : 'clone', 
    revert : true, 
    start: function(e,ui){ 
    // when starting the drag, reposition the element 
    $(this).hide().css({ position: 'relative', left: '-300px', top: 0 }); 
    }, 
    stop: function(e,ui){ 
    $(this).show(); 
    } 
}); 
$("#dropBox").droppable({ 
    drop: function(e, ui) { 
    ui.draggable.appendTo($(this)).show() 
    // reset the position of the element to zero (so it fits in the drop box) 
    .css({ position: 'relative', left: 0 }) 
    ui.helper.remove(); 
    } 
}); 
})