CODEWITHSUNDEEP
jqueryjquery-ui-draggablejquery-ui-droppable
Salman
Salman

Reputation: 1286

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

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 doesn't 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 Image

Upvotes: 2

Views: 156

Answers (1)

Dekel
Dekel

Reputation: 62556

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

Upvotes: 1

Related Questions