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

Question

Я хочу, чтобы перетаскиваемый элемент был возвращен в исходное положение, если вызов 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>

Answer 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>

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

Answer 2

Я искал в сети тот же самый перетаскиваемый вопрос этим утром.

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

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

Проверьте свой ответ в этом обратном вызове (если это возможно длявы) и верните «TRUE» для отмены или «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');
  }
} );

Хорошего дня

Answer 3

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

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

Answer 4

Сбросьте это так.он позволяет анимировать свойство сверху и слева в исходное положение

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

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

            }
            else{ //instructions for success}

        }
    });

Answer 5

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

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
               });
           }
       });
   }
});