如果无法通过验证,是否有办法将Jquery的可拖放对象恢复到其原始位置? [英] Is there a way to revert the Jquery drag-drop draggable to its original position if it fails validation?
问题描述
我正在尝试了解如何使其正常工作,但我不确定...
I am trying to understand how to get this to work and I am unsure...
我有多个父div(可放置对象)和多个子div(可拖动对象).
I have multiple parent divs (the droppables) and multiple child divs (the draggables).
子div包含一个表单,并且该表单包含许多输入标签.
The child divs contain a form and the form contains many input tags.
所有输入元素都是必需的,我希望用户在其中输入一个值.如果它们为空,并且用户未在其中输入值,并且用户将它们中的任何一个拖到任何父div内,则我希望子div得到验证.如果验证失败,那么我希望子div恢复到其位置.
All of the input elements are required and I want user to enter a value in it. If they are empty and user does not enter value in it and if the user drags any one of them within any parent div, I want the child div to be validated. If the validation fails then I want the child div to revert back to its location.
$( ".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();
我不知道如何实现此示例:
I can't figure out how to implement this Example:
http://jsfiddle.net/Dyawa/7/
如果子名称为空,子div是否有可能恢复到其原始位置?
Is it possible for child div to revert back to its original position if the name of the child is empty?
推荐答案
See this question: how to revert position of a jquery UI draggable based on condition
如果不符合某些规则,您需要指示JQuery还原可拖动的div.
You need to instruct JQuery to revert the draggable div if some rule is not met.
$(".child").draggable({ revert: 'invalid' });
然后在.droppable()中使用accept
选项设置对放置有效的内容,例如:
Then in your .droppable() sets what is valid for a drop using the accept
option, for example:
$(".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'});
}
});
这篇关于如果无法通过验证,是否有办法将Jquery的可拖放对象恢复到其原始位置?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!