代码之家 › 专栏 › 技术社区 › Barrie Reader

jquery-ui-draggable未从正确位置拖动

draggable jquery-ui jquery

Barrie Reader · 技术社区 · 14 年前

当我抓住我的可拖动物时,它们似乎错误地捕捉到了右边的网格-这让我困惑!

我知道如何拖动一个元素并使其靠近光标吗??

代码:

<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>

1 回复 | 直到 14 年前

Nick Craver 14 年前

问题来自于这里的样式:

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 .