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

【问题标题】：percentage of field dropped outside of drop area ,JQ Draggable and Droppable放置在放置区域之外的字段百分比，JQ Draggable 和 Droppable
【发布时间】：2016-12-30 09:48:29
【问题描述】：

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

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

它工作得很好，但如果字段的百分比移出可放置的位置，它不会恢复到最后一个位置

Js Fiddle Link

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

可以指导我如何解决它

【问题讨论】：

标签： jquery jquery-ui-draggable jquery-ui-droppable

【解决方案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>

【讨论】：