在掉落区域外移动的字段百分比，JQ Draggable和Droppable

Question

我使用Jquery DRAG＆amp; DROP拖动元素。为了防止字段掉落到droppable revert选项之外，已经使用了。

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

它运作完美但如果场的百分比超出可投放范围，它就不会恢复到最后位置

Js Fiddle Link

尝试将部分字段移动到可放置区域之外，它将允许删除字段。

可以指导我如何修复它

Answer 1

只有当可拖动项完全位于可放置元素内时，您才可以使用tolerance: 'fit'设置可拖动项：

$(document).ready(function () {
    $("#draggable").draggable({revert: "invalid"});
    $("#Dropable").droppable({
        activeClass: "ui-state-highlight",
        drop: function (event, ui) {
            alert("dropped!");
        },
        tolerance: 'fit'
    });
});

body {
    font-family:"Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
    font-size: 62.5%;
}
#draggable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
}
#Dropable {
    height:300px;
    width:400px;
    border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>
<div id="Dropable">Droppable area</div>