如果验证失败，是否有办法将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'}); 
    } 
});