放置区域外的字段百分比，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>

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

percentage of field dropped outside of drop area ,JQ Draggable and Droppable

jquery

jquery-ui-draggable

jquery-ui-droppable