Jquery ui draggable and droppable with reverting

by Rahul Gupta

HTML

<div id="questionsHolder">
    <div id="question1" class="question">
        1. This is a random question.
    </div>
</div>
 <br>
     <br><br><br><br><br>
 <div id="questionSlots"></div>

CSS

.question {
  width: 500px;
  height: 50px;
  margin-top: 25px;
  background: #ebedf2;
  border: 1px solid #333;
  clear: both;
  text-align: center;
  z-index: 200;
}

#questionSlots div {
  /*margin-top: 25px;*/
  border-width: 3px;
  border-style: dashed;
  width: 496px;
  height: 46px;
  background: #ddf;
}

#questionsHolder{
  border-width: 3px;
  border-style: dashed;
  width: 496px;
  /*height: 46px;*/
  background: grey;
}

#questionSlots div.hovered {
  background: #aaa;
}

JavaScript

$( init );

function init() {
    // Create droppable
			$('<div id="slot1"></div>').appendTo( '#questionSlots' ).droppable( {
			  accept: '#questionsHolder div',
			  hoverClass: 'hovered',
                drop:function(event, ui){
                    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
                }
			} );
    
    $('#questionsHolder').droppable( {
			  //accept: '#slot1 div',
			  hoverClass: 'ui-state-highlight',
                 drop:function(event, ui){
                    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
                }            
			} );
    
    // Make question draggable
		$("#question1").draggable( {
			cursor: 'move',
			//snap: '#content',
			revert: 'invalid'
			} );
    
    /*function handleQuestionDrop( event, ui ) {
        // Make sure no more questions get dropped at droppable
		// position it directly on top of the slot
		$(this).droppable({ accept: ('#' + $(ui.draggable).attr('id') ) });
        ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
        ui.draggable.draggable( 'option', 'revert', false );
		
	}*/
	}