Geek Answers Handbook

Draggable And Margin: 0 auto;

The problem with jQuery UI is sortable / draggable, where if the item being moved is centered with margin:0 auto, the drag starts on the left side of the container, not the center where the item really is.

Here is a demo to show what I mean: http://codepen.io/anon/pen/YqWRvV . Just drag the red square.

If you remove the margin:0 auto'.drag' from the element, you will see that the drag starts normally.

How can I fix this problem and drag the item from where it really happens when centering with margin:0 auto?

This is similar to Google Chrome.

$("#c").sortable();

`.drag {
   margin: 0 auto;
   width: 200px;
   height: 200px;
   background-color: red;
}`

CSS 'calc' , . "calc" , "margin".

, HTML , .

UPDATE: jQuery. Google Chrome. -, , jQuery , , . , , 13 , . http://codepen.io/anon/pen/YqWRvV. , .

http://codepen.io/anon/pen/MyjeJP Julien Grégoire . .

+4
6

Chrome , Firefox, , offset, . , mouseStart , , , , . .

_mouseStart. :

$("#c").sortable({
  ignoreMargins: true
});

$.ui.sortable.prototype._mouseStart = function(event, overrideHandle, noActivation) {
    ...
    if (!this.options.ignoreMargins) {

      this.offset = {
        top: this.offset.top - this.margins.top,
        left: this.offset.left - this.margins.left
      };
    }
    ...
}

http://codepen.io/anon/pen/BKzeMp

EDIT:

, start stop. , , auto, , , , , .

$("#c").sortable({
  start: function(e, ui) {
    var marginsToSet = ui.item.data().sortableItem.margins;
    // You set the margins here, so they don't go back to 0 
    // once the item is put in absolute position
      ui.item.css('margin-left', marginsToSet.left);
      ui.item.css('margin-top', marginsToSet.top);

  },
  stop: function(e, ui) {
    // Then you need to set the margins back once you stop dragging.
    // Ideally this should be dynamic, but you have to be able
    // to check which margins are set to auto, which as you'll
    // see if you look for some answers on this site, 
    // doesn't look that simple.
    ui.item.css('margin', '20px auto');
  }
});

http://codepen.io/anon/pen/mPrdYp

+2

, Codepen (Mozilla Chrome).

, , Chrome. Mozilla .

. Mozilla : 560px Chrome : 0;

.

, .

+1

jQuery, :

$("#c").sortable({
 helper: "clone"
});

CSS, :

#c {
  width: 100%;
  padding: 50px 0px;
  border: solid 5px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

Codepen

+1

, , , - http://codepen.io/anon/pen/VaaaaZ

calc auto CSS

+1

CSS, , JQuery. , - i, , , . 

$("#c").sortable();

$(".drag").css("margin-left",($(document).width()/2)-125);
$(window).resize(function(){
   $(".drag").css("margin-left",($(document).width()/2)-125);
});
0

It seems that in Chrome the .sortable()position of the element is not calculated correctly when you use margin: 0 autoand just set the position leftas 0. Therefore, I think you should find another way to horizontal center your element.

One option is to use text-align: centerfor the parent element and display: inline-blockfor the child

$("#c").sortable();
#c {
  width: 100%;
  padding: 50px 0px;
  border: solid 5px;
  box-sizing: border-box;
  text-align: center;
}

.drag {
  width: 200px;
  height: 200px;
  background-color: red;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div id="c">
  <div class="drag"></div>
</div>
Run codeHide result

Another is to use Flexboxand central child elements withjustify-content: center

$("#c").sortable();
#c {
  width: 100%;
  padding: 50px 0px;
  border: solid 5px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.drag {
  width: 200px;
  height: 200px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div id="c">
  <div class="drag"></div>
</div>
Run codeHide result
0
source

More articles:


All Articles