1

我试图了解如何让它发挥作用，但我不确定......

我有多个父 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是否可以恢复到原来的位置？

4

1 回答 1

0

看到这个问题：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'});
    }
});
于 2012-12-04T22:39:37.453 回答