javascript - 限制在一个div内拖动，在受限的div内限制一定高度？

Question

我正在使用 jQuery 的 draggable({containment: }); 来限制在特定区域内的拖动。我的问题是如何在受限的 div 内限制在 Y 轴的某个级别之后拖动？

jQuery("#map").draggable({
    containment: $('#range'),
    /////*
    stop: function(event, ui) {
        if(ui.position.bottom>375) {
          // stop dragging if exceed y axis 375 px ?
        }
    }
    */////
});

Answer 1

自 containment选项接受坐标数组，您可以从包含元素的高度中减去 375px。

(示例代码。确切的坐标取决于您的 CSS 和 HTML 结构)

$("#map").draggable({
    containment: [ 
        $('#range').offset().left,
        $('#range').offset().top,
        $('#range').offset().left + $('#range').width() - $("#map").innerWidth(),
        $('#range').offset().top + $('#range').height() - 275 
    ]
});

#range{
    width: 400px;
    height: 400px;
    background: #ccc;
}

#map{
    padding:5px;
    max-width:36px;
    background:black;
    color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>

<div id=range>
  <div id=map>MAP</div>
</div>

---

另一种解决方案是在 #range 元素内创建一个 #virtual-range 元素，并将其高度设置为 $('#range').height ()-375。然后使用 #virtual-range 作为拖动区域。再一次 - 一切都取决于您的 CSS 和 HTML 结构。

$('#virtual-range').css('height', $('#range').height()-275);

$("#map").draggable({
    containment: $('#virtual-range')
});

#range{
    margin-left: 50px;
    margin-top: 50px;
    width: 400px;
    height: 400px;
    background: #ccc;
}

#map{
    padding:5px;
    max-width:36px;
    background:black;
    color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>

<div id=range>
    <div id=virtual-range>
        <div id=map>MAP</div>
    </div>
</div>