jQuery UI Draggable not dragging from the correct place

Question

When I grab my draggable(s), they seem to snap incorrectly to the grid on the right - this has me confused!

Any idea how I can drag an element and have it snap closer to my cursor??

code:

<html>
    <head>
        <title></title>
        <script type="text/javascript" language="javascript" src="sys/jquery-1.4.2.js"></script>
        <script type="text/javascript" language="javascript" src="sys/jquery-ui-1.8.4.min.js"></script>
        <style type="text/css">
            * { font-family: arial; font-size: 11px; margin: 0; padding: 0; }
            div#create-container { width: 900px; height: 500px; min-height: 500px; background-color: #666; margin: 0 auto; }
            div#create-sections { width: 100px; height: 500px; min-height: 500px; background-color: #555; float: left; }
            ul#node-grid { width: 200px; height: 200px; min-height: 200px; background-color: #777; float: right; }
            li.grid-node { width: 20px; height: 20px; min-height: 20px; background-color: darkred; display: block; float: left; list-style-type: none; }
            div.onepx { width: 20px; height: 20px; min-height: 20px; background-color: #000; position: absolute; float: left; margin-left: 40px; margin-top: 40px; }
        </style>
        <script type="text/javascript">
            $(document).ready(function() {
            //add sections to page
                function addSections() {
                    var numParts = 10;

                    var addItems = numParts;
                    var addMoreItems = numParts*10;
                    while (addItems >= 0) {
                        $('div#create-sections').append('<div class="onepx"></div>');
                        addItems--;
                    }
                    while (addMoreItems > 0) {
                        $('ul#node-grid').append('<li class="grid-node"></li>');
                        addMoreItems--;
                    }
                }

                // init
                addSections();
                $(".onepx").draggable({ snap: '.grid-node', snapMode: 'inner', snapTolerance: 20, containment: '#create-container', opacity: 0.5 });
            });
        </script>
    </head>
    <body>
        <div id="create-container">
            <div id="create-sections"></div>
            <ul id="node-grid"></ul>
        </div>
    </body>
</html>

Answer 1

The problem comes from the styling here:

div.onepx { margin-left: 40px; margin-top: 40px; }

If you remove those margins, it'll be location on the cursor like you want, see an updated example here :)

You can give the #create-sections the padding to get a similar initial-position effect, like this:

div#create-sections { 
  width: 60px;             /* 100 - 40 */
  height: 460px;           /* 500 - 40 */
  min-height: 460px;       /* 500 - 40 */
  background-color: #555; 
  float: left; 
  padding: 40px 0 0 40px;  /* top, left: 40px */
}

You can give that version a try here .

jQuery UI Draggable not dragging from the correct place

Question

1 answers

solution1
2 ACCPTED 2010-08-10 09:40:57

jQuery UI Draggable not dragging from the correct place

Question

1 answers

solution1 2 ACCPTED 2010-08-10 09:40:57

solution1
2 ACCPTED 2010-08-10 09:40:57