Параметры jquery draggable

Я хочу, чтобы перетаскиваемый объект возвращался в исходное положение, когда я нажимаю кнопку. Я использовал вариант "destroy", но он, похоже, не работает. он отключает перетаскивание, но не возвращается в исходное положение.

может кто-нибудь помочь?

РЕДАКТИРОВАТЬ ЧАСТЬ:

$('#Zoom').toggle(function() {
                $("#draggable").draggable({});},
            function() {
                $("#draggable").draggable('destroy');});

это кнопка переключения, которую я использую, чтобы включить перетаскивание. опция destroy отключает перетаскивание и не возвращает объект обратно в исходное положение.

также это кнопка, которую я хочу вернуть объекту в исходное положение:

nextImg.addEventListener('click', function() {img.setAttribute("src", "img"+(++imgnum)+".jpg");}, false);

Ответ 1

Как насчет этого?

<script type="text/javascript">
jQuery(document).ready(function() { 
    $("#draggable").data("Left", $("#draggable").position().left)
                    .data("Top", $("#draggable").position().top);
    $("#draggable").draggable();

    $("#nextImg").bind('click', function() {
        $("#draggable").animate(
            { "left": $("#draggable").data("Left"), 
                "top": $("#draggable").data("Top")
            }, "slow");
        $("#draggable").attr("src", "img"+(++imgnum)+".jpg");
    });
});
</script>

Я сделал некоторые предположения, такие как следующий объект Img с идентификатором "nextImg", чтобы я мог привязать событие click с помощью jQuery (один из меньших шагов в процессе привязки событий javascript?). Я также предполагаю, что вы действительно не хотите уничтожать функции перетаскивания.

Ответ 2

Возврат выполняется при перетаскивании (с дополнительной задержкой), а не при нажатии.

$(document).ready(function() {
   var originalTop = $('#draggable').position().top;
   var originalLeft = $('#draggable').position().left;

   $('#Zoom').toggle(
         function() {
            $("#draggable").draggable({});},
         function() {
            $("#draggable").draggable('destroy');
            $('#draggable').position().top = originalTop;
            $('#draggable').position().left= originalLeft;
         });
});

Ответ 3

EDIT: Я уверен, что это будет трюк:

//reposition the draggable after it has finished
$(".selector").draggable({  
    stop: function(e,ui) { 
        ui.instance.element.css("left","0px"); 
        ui.instance.element.css("top","0px"); 
    } 
});

Ответ 4

function revertable($drag){     
    $drag.data({ top: $drag.css('top'), left: $drag.css('left') })  
    $('.'+$drag.attr('id')+'.revert').data({ revert: '#'+$drag.attr('id') })
        .on('click',function(){
            var $rev = $( $(this).data('revert') );
            $rev.css({ top: $rev.data('top'), left: $rev.data('left') });
    })
}

//просто вызывать функцию в событии создания

var $drag = $('#my_draggable'); //your element
$drag.draggable({
    create: revertable($drag)
});

//проверить это: изменить верхние/левые значения, обновить, нажать кнопку, чтобы увидеть, как она работает.

<div id="my_draggable" style="position:absolute;top:100px;left:100px">
    Drag Me Around
</div>

<button class="my_draggable revert">Revert My Draggable</button>

... проверено, должно работать для любого элемента (требуется функция jquery 1.7 для функции .on())

Ответ 5

Помогло бы вам помочь?

http://docs.jquery.com/UI/Draggable#option-revert

Ответ 6

Для параметра Revert по умолчанию установлено значение false, вы должны установить его значение true.

$("#draggable").draggable({ 
    revert: true
});

это должно сделать это на самом деле...