捕获 ui 拖到其父项之外

Question

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

这可以防止#blue 走出#parent。我尝试的是让它发出来，但在发生这种情况时发出警报： {遏制：“#parent”，滚动：假}

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，因为可放置小部件支持这种开箱即用的功能：

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

举个例子：http://jsfiddle.net/LL3g80r3/

捕获 ui 拖到其父项之外

Capture ui dragged outside its parent

jquery

jquery-ui