jQuery draggable：可拖动的框移过容器 - bug？ [英] jQuery draggable : the draggable box go over the container - bug?

问题描述

尝试此代码：

HTML

 < div class =draggable_container> 
< div id =draggable_1class =draggable> 
< div class =exp><！ -   - >< / div> 
< / div> 
< / div> 
  

CSS

  html 
 {
 height：3000px; 
} 
 
 .draggable_container 
 {
 height：300px; 
背景颜色：红色; 
 width：140px; 
} 
 
 .draggable 
 {
 height：60px; 
 width：130px; 
 cursor：pointer; 
 border：5px solid＃000000; 
 background-color：#ffffff; 
} 
  

jQuery

  $（。draggable）。draggable（{
 axis：y，
 containment：'parent'
}）; 
  

现在，如果您点击draggable框，然后上下移动鼠标将移动到容器高度。但是，如果您用鼠标点击此框，并滚动页面（使用鼠标滚轮...或将光标移动到底部，不释放）鼠标）盒子越过容器。这个很糟糕。

这是一个常见的错误吗？如何解决这个问题？

解决方案

我不知道这是否是一个错误，但是我通过添加 overflow：auto 到 .draggable_container css类。见： http://jsfiddle.net/QhVNr/2/

Try this code :

HTML

<div class="draggable_container">
    <div id="draggable_1" class="draggable">
        <div class="exp"><!-- --></div>
    </div>
</div>

CSS

html
{
    height:3000px;
}

.draggable_container
{
    height:300px;
    background-color:red;
    width:140px;
}

.draggable
{
    height:60px;
    width:130px;
    cursor:pointer;
    border:5px solid #000000;
    background-color:#ffffff;
}

jQuery

$(".draggable").draggable({
    axis: "y",
    containment: 'parent'
});

Now, if you click on the box "draggable" and you move the mouse up and down, it will move till the container height.

But, if you click with the mouse to this box, and you scroll the page (with the mouse wheel...or moving the cursor to the bottom, without release the mouse) the box go over the container. And this sucks.

Is it a common bug? How can I fix this trouble?

解决方案

I don't know if this is a bug, but I solve it by adding overflow:auto to the .draggable_container css class. See it here: http://jsfiddle.net/QhVNr/2/

这篇关于jQuery draggable：可拖动的框移过容器 - bug？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！