Question

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

在此处查看示例代码：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

您遇到的问题是由actions，item-container和spare-item类中的填充和边距引起的。在这些类中将margin和padding设置为零可以解决问题。例如

.actions{
  width: 234px;
  margin: 0px auto;
  padding: 0px; /*Updated*/
}

.item-container{
  height: 26px;
  margin: 0px auto; /*Updated*/
 }

.spare-item{
  background: red;
  display: inline-block;
  width: 26px;
  height: 26px;
  margin: 0px 0px; /*Updated*/
 }

在计算位置偏移时，jquery不计算#preview和actions item-container div之间的填充和边距，导致它与网格对齐，顶部间隙与间隙相同两个容器之间。因此，要解决此问题，请参阅“针对解决方案编辑”部分。下面：

[编辑解决方案]

只是为此更新每个人的解决方案。您需要使用snap选项并将其值设置为项目的可拖动功能中的网格元素。例如为了修复您的小提琴，只需在snap可拖动方法选项中添加此spare-items属性，如下所示：

        $( ".spare-item" ).draggable({
            grid: [ 26, 26 ],
            containment: "#preview",
            cursor: "grab",
            revert: "invalid",
            start: function( event, ui ) {
                console.log(ui);
                console.log(ui);
            },
            snap: '#preview'  // removes any margin or padding from the item
        });

希望这可以帮助您和所有遇到此问题的人。快乐的编码。：）

Answer 2

这里有多个问题。可拖动的元素仍然位于较低的div中，受边距和填充的影响，这会使你的.item容器相对偏移。最后，因为它们是内联块元素（与块元素相对），所以在BETWEEN TAGS之间的空白会导致元素之间存在空白空间。要么将它们转换为块元素，要么备用项div标记之间不能有任何空格。

网格似乎被原始项目位置偏移，因此偏移备用项目具有偏移网格。

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

边距和填充

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

内嵌块空白

如果有任何空格（空格，制表符，换行符），则内联块元素之间会有空格。所以要么制作备用物品元素显示：块或使用以下任何变体删除它们之间的空格：

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

- ＆GT;

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

如果链接死亡，列出的选项为：

移动标签，以便div之间没有空格
div之间的html评论
项目的负余量为计数器空白
没有关闭标签，因为html5允许它（没有测试了这个）
font-size：0;在物品容器上（对我没用）

Jquery UI可拖动/可放置对齐网格未正确定位

2 个答案: