javascript - Jquery UI 可拖动/可拖放捕捉到网格未正确定位

Question

我一直在尝试 JqueryUI 来完成一个简单的任务，我需要实现一个基本的拖放功能。我注意到当我使用捕捉到网格选项时，元素在被放到目标容器时没有正确对齐。尽管我将容器定义为目标区域，但它会从其容器中计算可拖动元素的位置。

请在此处查看示例代码:https://jsfiddle.net/9yzL87md/7/

 $( function() {
        $( ".spare-item" ).draggable({
            grid: [ 26, 26 ],
            containment: "#preview",
            cursor: "grab",
            revert: "invalid",
            start: function( event, ui ) {
                console.log(ui);
                console.log(ui);
            }                
        });
        $( "#preview" ).droppable({
                accept: ".spare-item",
                over: function(event, ui) {
                    $(".spare-item").draggable({
                        grid: [26, 26]
                    });
                },
                out: function(event, ui) {
                    $(".spare-item").draggable("option", "grid", false);
                },
        drop: function( event, ui ) {
            var pos = ui.draggable.offset(), dPos = $(this).offset();
            //console.log(pos.top - dPos.top, pos.left - dPos.left);
        }
        });            
    } ); 

以上是我的布局示例，以便于理解。如果您尝试拖动红色元素，它会立即将其带入灰色框中，但会被捕捉到比下边框低一点的位置。我尝试了许多类似的问题和解决方案，但没有运气。我在这里错过了什么？ (容器的宽度是234px，红色元素的宽度是26px，我希望红色元素在一个26 x 26的格子里对齐)

Answer 1

这里有多个问题。可拖动元素仍在较低的 div 中，并受边距和填充的影响，这会相对于您的 .item-container 抵消它们。最后，因为它们是行内 block 元素(与 block 元素相反)，所以 TAGS 之间的空白导致元素之间出现空白。要么将它们变成 block 元素，要么备用项 div 标记之间不能有任何空格。

网格似乎被原始元素位置偏移了，所以偏移备用元素有一个偏移网格。

结果:https://jsfiddle.net/9yzL87md/10/

1. 边距和填充

.output、.actions 或 .item-container 都不能有影响备用项的边距或填充。

.output{
    background:#646464;
#    padding: 5px; removed
}

.actions{
    width: 234px;
    margin: 0px auto;
#    padding: 5px; removed
}

.item-container{
    height: 26px;
    margin: 0px auto; #no vertical
}

.spare-item{
    background: red;
    display: inline-block;
    width: 26px;
    height: 26px;
    margin: 0 0; # no horizontal margin
}

1. 行内 block 空白

如果有任何空格(空格、制表符、换行符)，行内 block 元素之间会有一个空格。所以要么制作备用元素元素 显示: block 或使用以下任何变体删除它们之间的空格:

<div class="actions item-container"><!--
  --><div class="spare-item"></div><!--
  --><div class="spare-item"></div><!--
  --><div class="spare-item"></div><!--

-->

或此处描述的其他技巧之一 https://css-tricks.com/fighting-the-space-between-inline-block-elements/

万一链接失效，列出的选项是:

• 移动标签，使 div 之间没有空格
• div之间的html注释
• 元素 div 的负边距以对抗 空格
• 不放置结束标签，因为 html5 允许(还没有 对此进行了测试)
• 字体大小:0；在元素容器上(对我不起作用)