Draggable element with a centered margin of 0 auto

Question

Draggable element with a centered margin of 0 auto

Encountering an issue with jQuery UI sortable/draggable where the element being dragged, when centered using margin:0 auto, starts dragging from the left side of the container instead of the center where it is positioned.

Check out this demo to see the problem in action: http://codepen.io/anon/pen/YqWRvV. Just try dragging the red square.

If you eliminate margin:0 auto from the '.drag' element, you'll notice that the dragging behaves normally.

Any suggestions on how to resolve this issue and ensure the element drags from its true center location when centered using margin:0 auto?

This issue appears to be specific to Google Chrome.

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

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

Centering the element with CSS 'calc' does address the problem, but considering my element's width can change dynamically, 'calc' isn't as widely supported as 'margin'.

Although wrapping the draggable in a container resolves the issue, I'm seeking a solution that doesn't involve altering the HTML structure.

UPDATE: It turns out this isn't a jQuery bug but rather a bug within Google Chrome. It seems Chrome retrieves an incorrect position for the element, causing jQuery to initiate the drag from where Chrome inaccurately places it. I've outputted the left position of the element in the console which shows as 13px even though it isn't. Check it out here: http://codepen.io/anon/pen/YqWRvV. I wonder if this issue has been reported.

SOLUTION Discover the solution at: http://codepen.io/anon/pen/MyjeJP. Thank you Julien Grégoire. Please note: This solution may require a method to refresh the helper position.

javascript jquery css jquery-ui

Answer 1

Answer №1

When working with Chrome and Firefox, you may notice a discrepancy in how they return position values. However, using the offset property can help obtain consistent coordinates, especially when dealing with sortable elements. The issue arises during mouseStart where margins are excluded from calculations, causing problems specifically with auto margins.

To address this issue, one approach is to introduce an option to ignore margins by tweaking the _mouseStart function:

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

Alternatively, without modifying the plugin, adjusting the start and stop event handlers can also resolve the issue. One workaround involves explicitly defining margins within the sortable call, which may lack flexibility. Another method entails dynamically checking and setting auto margins:

$("#c").sortable({
  start: function(e, ui) {
    var marginsToSet = ui.item.data().sortableItem.margins;
    // Set specific margins here to maintain consistency
      ui.item.css('margin-left', marginsToSet.left);
      ui.item.css('margin-top', marginsToSet.top);

  },
  stop: function(e, ui) {
    // Reset margins after dragging stops
    // Ideally this should be dynamic, but determining auto margins dynamically poses challenges.
    ui.item.css('margin', '20px auto');
  }
});

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

Answer 2

When working with Chrome and Firefox, you may notice a discrepancy in how they return position values. However, using the offset property can help obtain consistent coordinates, especially when dealing with sortable elements. The issue arises during mouseStart where margins are excluded from calculations, causing problems specifically with auto margins.

To address this issue, one approach is to introduce an option to ignore margins by tweaking the _mouseStart function:

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

Alternatively, without modifying the plugin, adjusting the start and stop event handlers can also resolve the issue. One workaround involves explicitly defining margins within the sortable call, which may lack flexibility. Another method entails dynamically checking and setting auto margins:

$("#c").sortable({
  start: function(e, ui) {
    var marginsToSet = ui.item.data().sortableItem.margins;
    // Set specific margins here to maintain consistency
      ui.item.css('margin-left', marginsToSet.left);
      ui.item.css('margin-top', marginsToSet.top);

  },
  stop: function(e, ui) {
    // Reset margins after dragging stops
    // Ideally this should be dynamic, but determining auto margins dynamically poses challenges.
    ui.item.css('margin', '20px auto');
  }
});

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

Answer 3

Answer №2

Just wanted to let you know that I tested your Codepen on both Mozilla and Chrome browsers.

I noticed that what you mentioned only applies to Chrome. Interestingly, everything seems to be working fine on Mozilla.

The left property value differs between the two browsers. While dragging, it's set to left: 560px in Mozilla but starts at left: 0 in Chrome.

This discrepancy is causing a significant difference in how the dragging element appears from the left side.

Hopefully this information proves helpful to you!

Answer 4

Just wanted to let you know that I tested your Codepen on both Mozilla and Chrome browsers.

I noticed that what you mentioned only applies to Chrome. Interestingly, everything seems to be working fine on Mozilla.

The left property value differs between the two browsers. While dragging, it's set to left: 560px in Mozilla but starts at left: 0 in Chrome.

This discrepancy is causing a significant difference in how the dragging element appears from the left side.

Hopefully this information proves helpful to you!

Answer 5

Answer №3

Make sure to enhance your jQuery code by including the clone helper:

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

Don't forget to adjust your CSS for better positioning and overflow management:

#new {
  width: 100%;
  padding: 30px 0px;
  border: solid 3px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

Check out the updated Codepen demo here

Answer 6

Make sure to enhance your jQuery code by including the clone helper:

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

Don't forget to adjust your CSS for better positioning and overflow management:

#new {
  width: 100%;
  padding: 30px 0px;
  border: solid 3px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

Check out the updated Codepen demo here

Answer 7

Answer №4

After some experimentation, I discovered a solution that works for me which involves using the http://codepen.io/anon/pen/SbbbbX

Replace the use of 'auto' with the 'calc' function in CSS

Answer 8

After some experimentation, I discovered a solution that works for me which involves using the http://codepen.io/anon/pen/SbbbbX

Replace the use of 'auto' with the 'calc' function in CSS

Answer 9

Answer №5

If you're unable to center using CSS, another option is to center with JQuery. Take a look at the updated Demo in your codebase based on your feedback and requirements mentioned in this post and other answers. Demo

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

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

Answer 10

If you're unable to center using CSS, another option is to center with JQuery. Take a look at the updated Demo in your codebase based on your feedback and requirements mentioned in this post and other answers. Demo

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

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

Answer 11

Answer №6

When using Chrome, it appears that the .sortable() function doesn't accurately determine the position of an element when margin: 0 auto is used and only the left position is set to 0. It seems like you might need to explore alternative methods to horizontally center your element.

One approach is to apply text-align: center to the parent element and use display: inline-block on the child element.

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

Another option is to utilize Flexbox and center child elements by using 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.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>

Answer 12

When using Chrome, it appears that the .sortable() function doesn't accurately determine the position of an element when margin: 0 auto is used and only the left position is set to 0. It seems like you might need to explore alternative methods to horizontally center your element.

One approach is to apply text-align: center to the parent element and use display: inline-block on the child element.

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

Another option is to utilize Flexbox and center child elements by using 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.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>

Draggable element with a centered margin of 0 auto

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Employing v-btn for navigating to a different route depending on whether a specific condition is satisfied

Troubleshooting the issue of post-initialization store updates not functioning in AlpineJS

Building a dynamic cities dropdown menu in ReactJs based on the chosen country

Troubleshooting scope evaluation in AngularJS within style tags on IE9 not functioning

The process of toggling a div to slide up and down explained

Asynchronous setTimeout for server-side operations

Capture microphone and audio in a SIP call with sip.js

Check out how to utilize the jQuery .ajax Post method in a function

When using JSON.stringify(value, replacer), the output may vary between Chrome and Firefox

Is the value being used as the key for the array of objects?

How to target an ID containing a dot using jQuery

Action creator incomplete when route changes

The content inside a Textbox cannot be clicked on. I am seeking help with implementing JavaScript to enable it to be

Adding dynamic elements to a pop-up window with the use of jQuery's .load() function

The error message "Unexpected node environment at this time" occurred unexpectedly

Guide to storing a variable value when a user clicks on the client-side in a Grid View:

An onClick event is triggered only after being clicked twice

Postpone reloading automatically if a division is in view

What is the best way to send a populated custom class from JavaScript to a .NET MVC app using AJAX?

Attempted to utilize zipstatic but received no feedback