jquery css how to retain position if you remove margin


Tags: javascript,jquery,css,jquery-ui,margin

Problem :

I poked around and couldn't find this question in particular, if I missed it please kindly point me in the right direction.

Purpose: I'm in the process of creating a statistics reporting system for our website. When you first access it, it has a dashboard type of layout with overall statistics, and graphs to go along with it. I wanted to make it so that each individual set of stats/graphs can be moved around the page as you see fit, though it originally starts out in the center unless you move it. I'm using jQuery and the jQuery UI for this purpose.

Problem: For the initial view, I'm using margin: 0 auto to center the divs on the page. The first problem I had is when you go to drag it, you couldn't drag it to the left because of the margin that's set on it. I used the draggable event property start: to remove the margin property from the div. This fixed the problem with not being able to move it around as you would expect, but when you first begin to drag it, the removal of the margin forces the div to jump to the left side of the screen and you have to click it again.

Is there a way to prevent the "jump" and force the div to retain its current position while the margin property is being removed? Am I completely going about all of this in the wrong way? Any help is appreciated, even if you simply tell me to not go about it this way and figure something else out by yourself.

Thanks in advance!

jQuery:

<script>
    $(document).ready(function () {
        $.post("getStats.php", function (data) {
            var ctx = document.getElementById("myChart").getContext("2d");
            var myNewChart = new Chart(ctx).Pie(data);

        }, 'json');

        var contPos = $("#statOverallCont").position();
        $("#statOverallCont").draggable({
            snap: ".snapTarget",
            snapMode: "both",
            containment: "body",
            drag: function () {
                $("#statOverallCont").css("margin", "");
                $("#statOverallCont").css("left", contPos.left);
                $("#statOverallCont").css("top", contPos.top);
            }
        });
    });
</script>

^I tried to grab its original position, and then attempt to change the position after the margin is removed. It didn't seem to do anything at all.

The DIV w/ Style:

<div id="statOverallCont" style="background-color: #dbdbdb; position: relative; display: table; margin: 0 auto; text-align: center; clear:both; padding: 10px;border: 2px solid black" >

JSFIDDLE DEMO



Solution :

The drag function provides to parameters into it's callback. event and ui. The ui has a property called ui.position which contains left and top. When the drag strats, remove the margins, make the position of the element to absolute and set the position values taken from the parameters!

looks like this

drag: function (event,ui) {
     $("#statOverallCont").css("position", "absolute");
     $("#statOverallCont").css("left", ui.position.left);
     $("#statOverallCont").css("top", ui.position.top);
}

This should stick your element to the mouse when dragged.

Update :

You would need to update the css by removing the margin:0px auto; and then using the left property of the css set it to 50% so that it would be horizontally centered. This would allow you to drag the element without making it jump. Btw the idea was grasped by Fata1Err0r So win win situation. :D


    CSS Howto..

    show a website loading image using only CSS (not Javascript or jQuery)

    How do you create boxes like github's explore section?

    How to remove a CSS class from a Wicket component?

    How to serve different css files to different ajax pages?

    How to resize the width of a div based on another div on it's right, only with CSS(no JS)

    How to make a resizable menu centered on the middle?

    How can I position list in
    ?

    How to change the button color when it is active using bootstrap?

    How to make a responsive mosaic css fullscreen width

    How to combine components in HTML header

    How to fill HTML5 input[type=range] on the left side of the thumb with CSS only?

    How to deselect with CSS?

    How to give option to add css classes/IDs to content to in CMS's WYSIWYG content builder/editor to non-technical client?

    CSS stacking order - how to get this right?

    How to resize & move css divisions at same time?

    How to load CSS on PC and Mobile by jQuery?

    Ionic: How to center a div?

    How to simulate 'position:fixed' behavior on Flexbox-aligned sidebar

    PhoneGap: How to get iPad specific CSS to work?

    How can I add a css property to the first div with a specific class name?

    How do I get placeholder text in firefox and other browsers that don't support the html5 tag option?

    CSS: How to set height of body element to fill rest of total height excluding variable length header and footer

    how to make css hover just only in a bullet area

    Change how CSS border edges meet? [duplicate]

    How to align an image to the center with css?

    Show Child Div Above Elements on Parent Div Level using z-index

    How do I make effect like this on image hover?

    How to get All Defined CSS Selectors for a given DOM Element?

    How to start ordered list from 2 not 1 with w3c validity and IE 6 compatibility?

    jQuery hide show id