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选项设置对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'});
    }
});

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

1 个答案: