Why is this javascript not working with the operator on the variable

Question

I'm trying to make a drag and drop which adds to a variable and then resets. 

 

Here's my twine page:

<div id="icon1"><div id="lens"></div></div>

<div id="firstBox"></div>



<<script>>




postdisplay["DragItems"] = function (taskName) {

$( "#icon1" ).draggable({
	revert: true,
	containment: "window",
	scope: "first"
	});


	$( "#firstBox" ).droppable({
	scope: "first",
	drop: handleFirstDrop
	});

};


function handleFirstDrop( event, ui ) {
    ui.draggable.draggable( "option", "revert", false );
    $(this).droppable( 'disable' );
    $('.ui-draggable').draggable('disable');
		variables().shovelThis++;

  if ( 	variables().shovelThis < 2 ) {
	variables().shovelThis = 0;
    $('.ui-draggable').draggable('enable');
    ui.draggable.draggable( "option", "revert", true);
	$("#icon1").delay(500).removeAttr('style');
    $(this).droppable( 'enable' );
    }
};





<</script>>
<<nobr>><<repeat 1s>>
<<replace "#here">>	
$shovelThis<</replace>>
<</repeat>><</nobr>>
<span id="here"></span>

 

Here's the css: 

 

#icon1 {
float: left;
height: 100px;
width: 100px;
border-radius: 50px; 
background-color: blue;
z-index: 1; 
}

#lens{
height: 50px;
width: 50px;
border-radius: 25px; 
background-color: black;
z-index: 5; 
position: relative;
top: 25px; 
left: 25px; 
}


#firstBox {
float: right;
height: 200px;
width: 200px;
border-radius: 100px; 
background-color: white;
}

 

Currently you can drag the Iris to the center of the eyeball, and it'll stay there, which is good, I'm not looking to have it snap anywhere, just stick around. And if you don't drag it onto the eyeball it'll return to whence it came from, that's also good.

 

But what I'm looking to have happen is it drag to the eyeball, then take half a second and return to where it came. 

 

Also for some reason I can't use "is equal to" == as an operator, it breaks my script, the text turns green? 

Also I've updated to the latest Sugarcube 

Answer 1

I've figured out a way to get things to work how I want.

 

I have to put everything in a script tagged passage rather than include it as <<script>> and initialise each variable I want to use in the script before it'll get new variables. Such as adding it in each passage I want to use it in or in "StoryInIt" etc.

 

This will mean further working as I can't have something unique on each page I want to use this script, but it does work with what I want for the dragging, which is the more important right now.