Question

我为以下语句创建了一个拖放操作，并且在尝试正确删除所有可拖动项后尝试设置“祝贺”类型的东西。我将使整个事情淡出并显示一个新的div祝贺 - 我可以做到这好吧我只是找不到正确的代码来检查框是否在正确的div中。。。这是我使用jQuery或只是普通的javascript做的事情...是否有任何人在小提琴或codepen上有类似的互动??

基本上是这样的：

如果droppable包含draggable，draggable3，draggle4和draggable8，则droppable2包含draggable2，draggable5，draggable6和draggable7。。。

这就是我需要的一切。在jQuery形式lol - 请参阅下面我正在尝试的和我目前正在使用的内容。：）

这是我正在做的事情。。

http://codepen.io/lbarnes/pen/hIlKG

提前致谢。

道歉 - 如果我一直在尝试混淆 - 我已经用它来进行个别检查，但我不确定如何检查所有八个盒子在它祝贺之前已被拖入正确的类别。。。

$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
  drop: function() {
    alert( "dropped" );
  }
});

所以我试过这个。。

 $( ".draggable, .draggable2, .draggable3, .draggable4, .draggable5, .draggable6, .draggable7, .draggable8" ).draggable();
$( ".droppable, .droppable2" ).droppable({
  drop: function() {
    alert( "dropped" );
  }
});

JS：

$(function() {
        /** we set the draggable class to be draggable, we add the containment which will be #boxdemo, so dropable and draggable object cant pass out of this box **/
    $( ".draggable" ).draggable({ 
        containment:"#boxdemo",
        revert: "invalid"
    });

    $( ".draggable2" ).draggable({ 
        containment:"#boxdemo",
        revert: "invalid"
    });

    $( ".draggable3" ).draggable({ 
        containment:"#boxdemo",
        revert: "invalid"
    });

        $( ".draggable4" ).draggable({ 
        containment:"#boxdemo",
        revert: "invalid"
    });

        $( ".draggable5" ).draggable({ 
        containment:"#boxdemo",
        revert: "invalid"
    });

        $( ".draggable6" ).draggable({ 
        containment:"#boxdemo",
        revert: "invalid"
    });

        $( ".draggable7" ).draggable({ 
        containment:"#boxdemo",
        revert: "invalid"
    });

        $( ".draggable8" ).draggable({ 
        containment:"#boxdemo",
        revert: "invalid"   
    });

    $( ".droppable" ).droppable({
        /** tolerance:fit means, the moveable object has to be inside the dropable object area **/
        tolerance: 'fit',
        accept: ".draggable, .draggable3, .draggable4, .draggable8",

        out: function(event, ui) {
            /** We remove the hoverClass when the moveable object is outside of the dropable object area **/
            $('.ui-draggable-dragging').removeClass('hoverClass');
        },
        /** This is the drop event, when the draggable object is moved on the top of the dropable object area **/
        drop: function( event, ui ) {
            $( ".droppable" ).addClass('dropClass');
        }
    });

    $( ".droppable2" ).droppable({
        /** tolerance:fit means, the moveable object has to be inside the dropable object area **/
        tolerance: 'fit',
        accept: ".draggable2, .draggable5, .draggable6, .draggable7",

        out: function(event, ui) {
            /** We remove the hoverClass when the moveable object is outside of the dropable object area **/
            $('.ui-draggable-dragging').removeClass('hoverClass');
        },
        /** This is the drop event, when the draggable object is moved on the top of the dropable object area **/
        drop: function( event, ui ) {

            $( ".droppable2" ).addClass('dropClass');
        }
    });

});

完成后，使用Congrats类型消息拖放

0 个答案: