フィールドの割合がドロップ領域外にドロップされました.JQドラッグ＆ドロップ可能

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>