Theres an issue with jQuery UI sortable/draggable, where if the element being dragged is centered using margin:0 auto, the dragging begins on the left side of the container rather than the center where the element really is.

Heres a demo to show what I mean: . Simply drag the red square.

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

How can I fix this issue and have my element drag from where it really is when centering using margin:0 auto?

This seems to happen in Google Chrome.

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

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

centering the element with CSS 'calc' fixes the issue, but my elements width can change dynamically. Also 'calc' isn't as well supported as 'margin'.

Wrapping the draggable in a container fixes the issue, but HTML changes isn't a solution I'm looking for.

UPDATE: So this isn't a jQuery bug. It's a bug with google chrome. Apparently the wrong position is retrieved by chrome, and so jQuery starts the drag from where chrome tells it where the element is. I output the left position of the element in the console and you can see that it's 13px when it clearly isn't. . I'm wondering if this bug has been reported.

SOLUTION Thanks to Julien Grégoire Note: This solution may need a way to refresh the helper position.

Theres an issue with jQuery UI sortable/draggable, where if the element being dragged is centered using margin:0 auto, the dragging begins on the left side of the container rather than the center where the element really is.

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

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

How can I fix this issue and have my element drag from where it really is when centering using margin:0 auto?

This seems to happen in Google Chrome.

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

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

centering the element with CSS 'calc' fixes the issue, but my elements width can change dynamically. Also 'calc' isn't as well supported as 'margin'.

Wrapping the draggable in a container fixes the issue, but HTML changes isn't a solution I'm looking for.

UPDATE: So this isn't a jQuery bug. It's a bug with google chrome. Apparently the wrong position is retrieved by chrome, and so jQuery starts the drag from where chrome tells it where the element is. I output the left position of the element in the console and you can see that it's 13px when it clearly isn't. http://codepen.io/anon/pen/YqWRvV. I'm wondering if this bug has been reported.

SOLUTION http://codepen.io/anon/pen/MyjeJP Thanks to Julien Grégoire Note: This solution may need a way to refresh the helper position.

• javascript
• jquery
• css
• jquery-ui

Share Improve this question Follow edited Mar 12, 2016 at 22:43 asked Mar 8, 2016 at 17:29 user3758078user3758078 2

• I am using FirefoxDeveloperEdition and I do not see the bug – silviagreen Commented Mar 8, 2016 at 17:31
• I see it works on firefox. Meaning this is a Chrome issue, try it on Chrome and you'll see. – user3758078 Commented Mar 8, 2016 at 17:40

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2 +200

Chrome returns the position differently than Firefox, but you get proper coordinates using offset, which is what sortable uses. The problem is that on mouseStart, the margin are removed from the calculations, which probably makes sense when you have a margin set. But with auto margin it creates this problem.

You could add an option to ignore margins and modify _mouseStart. Like this:

$("#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:

If you don't want to modify the plugin, you can work with start and stop event. One problem is that it's hard to check if margins have been set to auto, so you define them in your sortable call, which is not as flexible as it should be, or you find a way to check which margins are auto dynamically.

$("#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

Hey I am testing your Codepen and checked it in two different browser (Mozilla & Chrome).

I got something that what you are saying is for Chrome. But in Mozilla it's working fine.

And in chrome position left property value is different. Means in Mozilla it's left: 560px while dragging and in Chrome it's starting from left: 0;

That is the reason of dramatically showing dragging element from the left.

I hope it will help you.

Update your jQuery to add the clone helper:

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

And update your CSS to add position and overflow:

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

Updated Codepen

well the workaround i came around is http://codepen.io/anon/pen/VaaaaZ

use calc instead of auto in CSS

If you can't set center with CSS than another option is set center with JQuery. Please check out Demo i updated in your code base on your feedback and requirement which you explained in this post and other's answer. Demo

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

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

It seems that on Chrome .sortable() doesn't properly calculate position of element when you use margin: 0 auto and just set left position as 0. So i guess you should find other way to horizontally center you element.

---

One option is to use text-align: center on parent element and display: inline-block on 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="//ajax.googleapis./ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div id="c">
  <div class="drag"></div>
</div>

Other one is to use Flexbox and center child elements with justify-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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="//ajax.googleapis./ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div id="c">
  <div class="drag"></div>
</div>