В jQuery, как вернуть перетаскиваемый вызов ajax call?

Я хочу, чтобы draggable возвращался в исходное положение, если вызов ajax при удалении возвращает сбой. Вот код, который я представляю себе. Это нормально, если перетаскиваемый объект лежит в droppable, пока выполняется вызов ajax...

<script type="text/javascript">
jQuery(document).ready($){
    $("#dragMe").draggable();
    $("#dropHere").droppable({
        drop: function(){
            // make ajax call here. check if it returns success.
            // make draggable to return to its old position on failure.
        }
    });
}
</script>
<div id="dragMe">DragMe</div>
<div id="dropHere">DropHere</div>

Ответ 1

Спасибо за ваш повтор @Fran Verona.

Я решил это так:

<script type="text/javascript">
jQuery(document).ready($){
    $("#dragMe").draggable({
        start: function(){
        $(this).data("origPosition",$(this).position());
        }
    });
    $("#dropHere").droppable({
        drop: function(){
            //make ajax call or whatever validation here. check if it returns success.
            //returns result = true/false for success/failure;

            if(!result){ //failed
                ui.draggable.animate(ui.draggable.data().origPosition,"slow");
                return;
            }
            //handling for success..
        }
    });
}
</script>
<div id="dragMe">DragMe</div>
<div id="dropHere">DropHere</div>

Требуется избежать любых новых глобальных переменных, а также количество переменных было непредсказуемым, так как многие перетаскивания могут произойти во время первого, т.е. до того, как 1-й вызов вернется.! BTW, для тех, кто ищет тот же ответ, . Data() не работает на всех элементах, я не уверен в jQuery.data(), хотя.. Дай мне знать, если кто-нибудь найдет в этом что-то неправильное!:)

Ответ 2

Я смотрел в сети по тому же перетаскиваемому вопросу сегодня утром.

Решение NikhilWanpal работает, но иногда позиция возврата неверна в моем случае, возможно, потому что мои перетаскиваемые элементы содержатся в прокручиваемом контейнере.

Я нашел эту статью, в которой объясняется, как реализовать очень полезную недокументированную функцию: jQuery UI Draggable Revert Callback.

Проверьте свой ответ в этом обратном вызове (если это возможно для вас) и верните "ИСТИНА" для отмены или "FASLE" для подтверждения новой позиции.

$(".peg").draggable(
{
  revert: function(socketObj)
  {
     //if false then no socket object drop occurred.
     if(socketObj === false)
     {
        //revert the peg by returning true
        return true;
     }
     else
     {
        //socket object was returned,
        //we can perform additional checks here if we like
        //alert(socketObj.attr('id')); would work fine

        //return false so that the peg does not revert
        return false;
     }
  },
  snap: '.socketInner',
  snapMode: 'inner',
  snapTolerance: 35,
  distance: 8,
  stack: { group: 'pegs', min:50 },
  stop: function()
  {
     draggedOutOfSocket = false;
     alert('stop');
  }
} );

Хороший день

Ответ 3

Если вы не используете друг друга с левым или верхним позиционированием на перетаскиваемых элементах, это так же просто, как сброс этих свойств css после выключения ошибки ajax:

drop_elems.droppable({
  drop: function(event, ui) {
    $.ajax(url, {
      error: function(x, t, e) {
        ui.draggable.css({top: 0, left: 0});
      },
    });
  }
});

Ответ 4

Попробуйте сохранить исходную позицию, прежде чем приступать к ее перетаскиванию и восстановлению, если сбрасываются капли. Вы можете сохранить исходное положение следующим образом:

var dragposition = '';

$('#divdrag').draggable({
   // options...
   start: function(event,ui){
      dragposition = ui.position;
   }
});

$("#dropHere").droppable({
   drop: function(){
       $.ajax({
           url: 'myurl.php',
           data: 'html',
           async: true,
           error: function(){
               $('#divdrag').css({
                  'left': dragposition.left,
                  'top': dragposition.top
               });
           }
       });
   }
});

Ответ 5

Reset так. он позволяет анимировать свойство top и left в исходное положение

$("#dropHere").droppable({
        drop: function(){

            if(!result){ //failed
               ui.draggable.animate(ui.draggable.data("ui-draggable").originalPosition,"slow");

            }
            else{ //instructions for success}

        }
    });