限制在 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>