Salman Salman - 1 year ago 130
jQuery Question

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

i m using Jquery DRAG&DROP for dragging elements. To prevent field from dropping outside of droppable revert option has been used.

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

It works perfectly but it doesnt revert to last position if percentage of field moved out of droppable

Js Fiddle Link

Try to move portion of field outside droppable area and it will allow field to be dropped.

can some on guide me to how to fix it

Answer Source

You can use the tolerance: 'fit' to set the draggable item be dropped only if it is completely inside the droppable element:

$(document).ready(function () {
    $("#draggable").draggable({revert: "invalid"});
        activeClass: "ui-state-highlight",
        drop: function (event, ui) {
        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 {
    border: 2px solid red;
<script src=""></script>
<link rel="stylesheet" href="">
<script type="text/javascript" src=""></script>
<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
<div id="Dropable">Droppable area</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download