Question

我有两个div元素。我想拖动第一个div然后想要删除并将其附加到另一个div。拖动效果很好但是当我放下第一个div时，它会超出目标div区域。我不希望它超出目标区域。这是代码

    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
    <script>
    $(function()
    {
        $("#x").draggable();
        $("#y").draggable().droppable(
        {
            drop: function(event,ui)
            {
                $(this).append($(document.getElementById("x")));
            }
        });
    });
    </script>

    </head>
    <body>

        <div  id="y" style="width:300px;height:300px;background:#89A94B;" ></div>
        <div  id="x" style="width:200px;height:200px;background:#50555B;" ></div>

    </body>

这里是演示jsfiddle 请帮忙。

Answer 1

我刚刚调整了你的小提琴：Drag and Drop

$("#x").draggable({
 revert: 'invalid' 
});


$("#y").droppable({
 accept: '#x',
 tolerance: 'fit',
 drop: function (event, ui) {
    // do stuff
  } 
});

如果#x放在#y之外，我不知道你想要发生什么 - 我刚才用过 #x的选项revert: 'invalid'所以#x在成功下降时保留在#y内部，对于dropzone #y选项tolerance: 'fit'，所以#x不会留在#y内，以防它完全不在#y内。

更新：添加了第二个版本。现在#x作为#y的子项附加，只是使用CSS放置在#y的中间，覆盖draggable - droppable UI的设置。由于它并不完全清楚需要什么，请随意添加另一条评论，但我想这可能是你想要发生的事情：

演示：Appending draggable as child of droppable

调整原始代码如下：

$(function () {
  $("#x").draggable();
  $("#y").draggable().droppable({
    drop: function (event, ui) {
        $(this).append($("#x"));
        $("#x").draggable('disable');
    }
  });
});

#x现在附加到#y，另外我在#x被删除时禁用#x的draggable（）。

CSS：

#y {
 overflow:hidden;
}
#y #x {
   background:red !important;
   position:absolute !important;
   top:0 !important;
   left:0 !important;
   margin-left: 25px !important;
   margin-top: 25px !important;
}

当#x附加到#y时，我将背景设置为红色并覆盖UI设置，将#x放在#y中间。另外，我设置#y overflow：hidden;这是因为UI设置的主要问题 - 它可以仅调整UI CSS，但认为使用一些额外的CSS（如建议）更容易完成。使用溢出：隐藏，当#x被追加到＆＃34;进入＆＃34;时，你不会看到在#y之外显示#x的任何内容。 #y - 就像你问题中的小提琴一样。可以编写一个正确定位的功能，但由于我不确定结果应该是什么样的，并且您只需要将丢弃的div保留在dropzone内，这可以满足您的要求和您可以调整CSS以获得您正在寻找的结果。

拖动，拖放和追加不正确定位div元素

1 个答案: