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>

另一个解决方案是在#virtual-range元素中生成#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>

限制div内的div和某个高度内的拖动？

1 个答案: