如果驗證失敗，是否有辦法將Jquery拖放拖放到原始位置？

Question

我想了解如何得到這個工作，我不確定...

我有多個父div（可droppables）和多個子div（draggables）。

子div包含一個表單並且表單包含許多輸入標籤。

所有的輸入元素都是必需的，我希望用戶輸入一個值。如果它們是空的，並且用戶沒有在其中輸入值，並且用戶在父div中拖動它們中的任何一個，我想要驗證子div。如果驗證失敗，我希望子div恢復到它的位置。

$(".parent").droppable({ 
     accept: ".child", 
     activeClass: "ui-state-hover", 
     hoverClass: "ui-state-active", 
    tolerance:'pointer', 
     drop: function(event, ui) { 
//validate and then reject if it fails??? 
      $(this) 
       .addClass("ui-state-highlight") 
       .find("p") 
       .append(ui.draggable).animate({width:'100',height:'100'}); 
     } 
    }); 

$(".child").draggable();​ 

我無法弄清楚如何實現這個例子：

http://jsfiddle.net/Dyawa/7/ 

是否有可能爲孩子div來恢復到原來的位置，如果孩子的名字是空的？

Answer 1

看到這個問題：how to revert position of a jquery UI draggable based on condition

您需要指示JQuery的恢復可拖動的div如果一些規則沒有得到滿足。

$(".child").draggable({ revert: 'invalid' }); 

然後在你的.droppable（）設置什麼是有效的使用accept選項的下降，例如：

$(".parent").droppable({ 
    accept: function(dropElem) { 
     //dropElem was the dropped element, return true or false to accept/refuse it 
     return ($(dropElem).hasClass("child") && $("input",dropElem).val().length > 0); 
    }, 
    activeClass: "ui-state-hover", 
    hoverClass: "ui-state-active", 
    tolerance:'pointer', 
    drop: function(event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
      .append(ui.draggable).animate({width:'100',height:'100'}); 
    } 
});