jquery - 放置在放置区域之外的字段百分比，JQ Draggable 和 Droppable

Question

我使用 Jquery DRAG&DROP 来拖动元素。为了防止字段掉落到可放置恢复选项之外，已使用了该选项。

$("#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>