I'm creating a math game. The game will allow children to drag the subtraction symbol "-" over any of the two numbers and the answer will appear (e.g. 9-4 = 5).

The code below does work properly on Chrome and Safari but the drag functionality does NOT work on Firefox.

Can anyone suggest ways to optimize the code below and make the drag functionality work on Firefox?

Example here: http://jsfiddle.net/W572n/

Thanks in Advance

        //declare my variables
        var numLow = 1, //lowest number
         	numHigh = 20,//highest number
         	$firstNum = $('#firstNum'),
         	$secondNum = $('#secondNum'),
         	adjustedHigh, numRand1, numRand2 = null;
        	//Callback function when cancelling the event
        	function cancel(e){
	        	return false;
         	//generates random numbers and stores random numbers in data-price attribute 
         	//and displays random numbers in divs #firstNum and #secondNum
		 	adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;
            numRand1 = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
            numRand2 = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
        	$firstNum.attr('data-price', numRand1);
        	$firstNum.text( $("#firstNum").attr("data-price"));
        	$secondNum.attr('data-price', numRand2);
        	$secondNum.text( $("#secondNum").attr("data-price"));
		    //Get the .drop zones
		    var drop = $('.drop');
		    var draggedItem = null;
		    //Add the Event Listener to draggable item "+" symbol
		    $('.draggable-item').on('dragstart', function(e){
		        draggedItem = jQuery(this);
		    }, false);
		    drop.on('dragover', cancel);
		    drop.on('dragenter', cancel);
		    drop.on('drop', function(e){
		    	//Prevent default browser behaviour
		      //Do the math
		    var sum = parseInt($("#firstNum").attr("data-price")) + parseInt($("#secondNum").attr("data-price"));
		     //add result 
		       return false;