CODEWITHSUNDEEP
javascriptjquerygoogle-chrome
CappY
CappY

Reputation: 1580

jQuery Draggable - Getting out of containment - Chrome Bug

I realized that I there is bug with jQuery Draggable in Chrome, that doesn't exist in Firefox and Internet Explorer. I have div #drag-container /450x80/ and 3 draggable objects inside. /150x0/ and when I move them to lowest point ,let them and drag again LOWER they get position 0,80 + 14 = 0,94 px. I let them and drag and they get 14 px lower again.

Is there fix ?

Working demo: http://jsfiddle.net/ucmqq/ Here is code:

<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>

Upvotes: 0

Views: 3260

Answers (2)

Danny Ocean
Danny Ocean

Reputation: 1121

I had the same bug, but in my case there wasn't height of draggable element. In my case I've used bootstrap, and I tried to drag elements to the different col-md-3 divs. The problem was in css float property of col-md-3. So I had to remove it, and use display: inline-block; vertical-align: top;

Maybe it will help someone.

Upvotes: 0

CappY
CappY

Reputation: 1580

The problem was that the height of draggable object is 0. With height 1 again it's buggy, but without height at all it's ok.

Upvotes: 1

Related Questions