Jquery Always Revert Draggable Object Valid

Question

I have a drag and drop example that reverts a draggable object back to it's original position when it is dropped in a droppable div.

My problem is that when revert is on valid on my draggable objects I am able to drag the objects to a different position on the page, My draggable objects only revert back when I drop them into the droppable div.

I want my draggable objects to revert back regardless of where on the page you drag them to?

I have tried this which works but does not work.

{
revert: 'vaild',
stop: function(){
    $(this).draggable('option','revert','invalid');
}

My problem here is that my draggable objects revert but no not revert when I drop them into the droppable div.

  <script>
        $(function() {
        $( "#draggable" ).draggable({ revert: "valid" });
        $( "#draggable1" ).draggable({ revert: "valid" });
        $( "#droppable" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
        var dragElemId = ui.draggable[0].id;
        var imgPath = $('#' + dragElemId).attr("des-image");
        $( this )
            .find( ".drop-image" ).removeAttr("src").attr("src",imgPath);
        }
        });
        });
        </script>

Kevin Bowersox Kevin Bowersox · Accepted Answer · 2013-03-19T09:49:47

Setting the revert property to true will cause them to always revert.

   $( "#draggable" ).draggable({ 
       revert: true
   });
   $( "#draggable1" ).draggable({ 
       revert: true
   });
   $( "#droppable" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
             //ommited for brevity
        }
    });

Working Example: http://jsfiddle.net/yLuvv/

Jquery Always Revert Draggable Object Valid

1 Answers