如果validation失败，有没有办法将Jquery拖放恢复到原始位置？

我想知道如何让这个工作，我不确定……

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

子div包含一个表单，表单包含许多输入标签。

所有输入元素都是必需的，我希望用户在其中输入值。 如果它们是空的并且用户没有在其中输入值，并且如果用户在任何父div中拖动它们中的任何一个，我希望validation子div。 如果validation失败，那么我希望子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

请参阅此问题： 如何根据条件恢复可拖动的jquery UI的位置

如果不满足某些规则，您需要指示JQuery恢复可拖动的div。

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

然后在.droppable（）中使用accept选项设置对drop有效的内容，例如：

 $(".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'}); } });