I'm trying to “get” jQuery Draggable. Site is laid out using Twitter Bootstrap. If you do not specify the container - everything is fine, moves as it should, if you specify, for example, window - also all the rules. But if you specify parent or specifically a block (via class or id ), then a strange one begins - when you move the block, it starts to “magnetize” the edges to the specified container (and the snap property is not included) and move at once by several hundred pixels abruptly, not smoothly. And what's more interesting, if you move the mouse to the right - the block will crawl to the left, and vice versa. Up and down is the same problem.

 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 sin on Bootstrap, but I don’t know what exactly might be.

Can anyone come across?

  • Can you give an example on jsfiddle? - Vladimir Zhukov
  • jsfiddle.net/GodZiLA/sjuaeLeo/13 - an example with a container, jsfiddle.net/GodZiLA/sjuaeLeo/12 - an example without it. You need to click "edit" and move the picture - GodZiLA
  • Please transfer the code from third-party feeds directly to the question (and then the links get rotten and the question becomes meaningless). Editing is opened with the edit button. - Nick Volynkin ♦

1 answer 1

Try turning off the style:

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

In JSFiddle everything worked after my shutdown.

  • Disconnected, on JSFiddle - up / down smoothly, right / left - twitches. On my site - and twitches up / down ... - GodZiLA