Question

当我抓住我的拖车时，它们似乎错误地突然移动到右侧的网格 - 这让我感到困惑！

我知道如何拖动一个元素并让它更接近我的光标吗？

代码：

<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

问题来自于造型：

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

如果删除这些边距，它将是光标所在的位置，see an updated example here：）

你可以给#create-sections填充以获得类似的初始位置效果，如下所示：

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不能从正确的位置拖动

1 个答案: