javascript - 如何使 block 只能在某个 block 内拖动？

Question

我有一个小问题。我粘贴了我的代码 here .

我的问题是:我想制作我的 window div ( <div id="window"> Drag me </div> ) 只能在 warp 内拖动分区

HTML代码:

<div id="warp">
    <div id="window">
        Drag me
    </div>
</div>

CSS 代码:

body {
    margin: 0;
    background-color: #e67e22;
}

#window {
    width: 150px;
    height: 200px;
    //background-color: #1abc9c;
    border: 2px solid #16a085;
    padding: 20px;
}

#warp {
    margin: 10px;
    width: 700px;
    height: 600px;
    border: 2px solid #e74c3c;
}

JS代码:

$(document).ready(function() {
    $("#window").draggable();
});

我的意思是，当我用鼠标拖动它时，它不应该超出 warp。分区

Answer 1

你可以使用

$( "#window" ).draggable({
      containment: 'parent'
    });