jquery draggable refuses to work normally with containment

[Laycee]

I'm trying to make jQuery Draggable. Site's got a Twitter Bootstrap. If you don't tell the container, it's okay, it's moving as good as it is if you say, for example, window - It's okay, too. But if you indicate a parent or a specific block (cross class or idThen it starts weird - when the block moves, it starts to "white" by the edges to the container (why the slash didn't turn on) and move straight through a few hundred picels sharply, not smoothly. And more interestingly, if you lead a mouse to the right, the block goes to the left and vice versa. That's the same problem up there.

jQuery('.edit-button').click(function() {
  jQuery('#photo-concurs').addClass('edit');
});
jQuery('#photo-concurs img').draggable({

cursor: "move",

containment: 'parent',

scroll: false,

stop: function() {

jQuery('#photo-concurs').removeClass('edit');

}

});

.long-block {

width: 100%;

height: auto;

float: left;

min-width: 320px;

}

.row {

margin: 0 auto;

}

#photo-concurs {

margin: 0 auto;

overflow: hidden;

}

#photo-concurs .frame {

position: absolute;

left: 0;

top: 0;

z-index: 4;

background: url(http://astrafarm.com/sites/all/themes/nvp/img//frame_X.png) no-repeat;

}

#photo-concurs .frame.horizontal {

width: 600px;

height: 450px;

background: url(http://astrafarm.com/sites/all/themes/nvp/img//frame_X.png) no-repeat;

}

#photo-concurs.edit {

z-index: 1;

overflow: visible;

}

#photo-concurs.horizontal {

width: 600px;

height: 450px;

}

.long-block #photo-concurs img {

z-index: 2;

position: absolute;

top: 0;

left: 0;

max-width: none;

}

#photo-concurs.edit img {

opacity: 0.6;

-moz-opacity: 0.6;

filter: alpha(opacity=60);

z-index: 5;

cursor: move;

}

.edit-button {

width: 120px;

height: 30px;

background: #0095d4;

color: #fff;

font-size: 16px;

text-align: center;

line-height: 30px;

float: left;

cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="long-block">

<div class="row">

<div id="photo-concurs" class="horizontal">

<img height="400px" src="http://www.vetkabinet96.ru/pics/sterilizatsija-koshki.jpg" alt="" title="" />

<div class="frame horizontal"></div>

</div>

<div class="edit-button">Редактировать</div>

</div>

</div>

I'm sinned on Bootstrap, but I don't know what it might be.

Maybe who's faced it?

[Pearlaqua]

Try to turn off the style:

#photo-concurs {
    margin:0 auto;
    overflow:hidden;
}

In JSFiddle, I made it all work after the blackout.