Question

我在父div中有一些div。有什么方法可以检测出其中一个内部div是否被拖到其父级之外？

这可以防止#blue走到#parent之外。我尝试的是让它出来但发生这种情况时会发出警报： {containment：“＃parent”，scroll：false}

JQUERY UI：

$( ".blue" ).draggable(

        // { containment: "#parent", scroll: false }, 
        { drag: function( event, ui ) { 
            if(   ) { 
                // alert( "something" );    
            }
        }

    });

HTML：

<div id="parent">
    <div class="blue"></div>
    <div class="blue"></div>
    <div class="blue"></div>
</div>

CSS：

#parent {
    position:relative;
    margin:0 auto;
    width:300px; height:300px;
    border: 1px #ccc solid;
}

.blue { 
    float:left;
    display:inline-block;
    width:30px; height:30px;
    margin:10px;
    background:blue;
    cursor:pointer;
}

Answer 1

一个非常简单的（而不是重量级！）解决方案是制作整个容器droppable，因为droppable小部件支持这个不合适的容器-box：

$("#parent").droppable({
    accept: ".blue",
    out: function() {
        alert( "something" );
    }
});

以下是一个例子：http://jsfiddle.net/LL3g80r3/

捕获ui拖到其父级之外

1 个答案: