jQuery Draggable - 摆脱遏制 - Chrome Bug

时间:2011-02-14 20:54:21

标签: javascript jquery google-chrome

我意识到我在Chrome中存在jQuery Draggable的错误,这在Firefox和Internet Explorer中不存在。我有div#drag-container / 450x80 /​​和3个可拖动的对象。 / 150x0 /当我将它们移动到最低点时,让它们再次拖动LOWER,它们会得到位置0,80 + 14 = 0.94 px。我让它们拖动,再次降低14 px。

有修复吗?

工作演示:http://jsfiddle.net/ucmqq/ 这是代码:

<style>
    .draggable { width: 150px; height: 0px; cursor:move; }
    <?PHP if($userinfo->use_colors != '0'): ?>
    #drag-container { width: 450px; height:80px; background-color:<?=$userinfo->background?>; }
    <?PHP else: ?>
    #drag-container { width: 450px; height:80px; background:url(/backgrounds/<?=$userinfo->image?>); }
    <?PHP endif; ?>
    </style>

    <script language="javascript">

    $(function() {
        $( "#draggable" ).draggable({ cursor: "move",containment: 'parent', scroll: false,
        stop: function() {
        document.settings.np_x.value = $(this).css('left');
        document.settings.np_y.value = $(this).css('top');
         }
                                    });
        $( "#draggable2" ).draggable({ cursor: "move",containment: 'parent', scroll: false ,
        stop: function() {
        document.settings.artist_x.value = $(this).css('left');
        document.settings.artist_y.value = $(this).css('top');
         }
                                     });
        $( "#draggable3" ).draggable({ cursor: "move",containment: 'parent', scroll: false ,
        stop: function() {
        document.settings.other_x.value = $(this).css('left');
        document.settings.other_y.value = $(this).css('top');
         }
                                     });
    });

    </script>


<div id="drag-container">
    <div id="draggable" class="draggable" style="position:relative;top:5px;left:80px;">
        .::[ NowPlaying SIGnature ]::.
    </div>
    <div id="draggable2" class="draggable" style="position:relative;top:25px;left:80px;">
        Artist - title
    </div>
    <div id="draggable3" class="draggable" style="position:relative;top:45px;left:80px;">
        Album: (Year)
        <br>
        Genre:
    </div>

</div>

2 个答案:

答案 0 :(得分:1)

问题在于,可拖动物体的高度为0.高度为1时,它的车很多,但没有高度就可以了。

答案 1 :(得分:0)

我有同样的错误,但在我的情况下,没有可拖动元素的高度。在我的情况下,我使用了bootstrap,我试图将元素拖到不同的 col-md-3 div。问题出在col-md-3的css float 属性中。所以我不得不删除它,并使用display: inline-block; vertical-align: top;

也许它会帮助别人。