Need help with Drag and Drop Function and Button

Need help with Drag and Drop Function and Button

I am not sure this is the right spot but im a newb at Jquery and this is Mobile.

I had to build a small functioning page to drag and drop items for class to demonstrate an idea on my Thesis. Here is my problem.

When on mobile click on the test page below. you will see you can drag and drop the cats anywhere. Then there is a button at the bottom of the screen. Here is what I want and cant figure out. When the Button is tapped it will turn Green or Gray. On Green you can Drag the cats. On Gray I would like them to be locked where a user cant drag them. Right now No matter what color the button is the cats are dragable. Here is my code and test page below. Remember the test page only really works on a mobile device.

Mobile Test Page: http://shannonsepelak.com/dragCats/build/


// /*toggle page function*/
$(function(){
$(".img-swap").live('touchstart', function(){
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");


/*drag and drop function*/
var dragndrop = (function() {
var myX = '';
var myY = '';
var whichArt = '';

function resetZ(){
var elements = document.querySelectorAll('img');
for (var i = elements.length - 1; i >= 0; i--) {
elements[i].style.zIndex = 5;
};
}

function moveStart(e) {
whichArt = e.target;
myX = e.offsetX === undefined ? e.layerX : e.offsetX;
myY = e.offsetY === undefined ? e.layerY : e.offsetY;
resetZ();
whichArt.style.zIndex = 10;
}

function moveDragOver(e) {
e.preventDefault();
}

function moveDrop(e) {
e.preventDefault();
whichArt.style.left = e.pageX - myX + 'px';
whichArt.style.top = e.pageY - myY + 'px';
}

function touchStart(e){
e.preventDefault();
var whichArt = e.target;
var touch = e.touches[0];
var moveOffsetX = whichArt.offsetLeft - touch.pageX;
var moveOffsetY = whichArt.offsetTop - touch.pageY;
resetZ();
whichArt.style.zIndex = 10;

whichArt.addEventListener('touchmove', function(){
var positionX = touch.pageX + moveOffsetX;
var positionY = touch.pageY + moveOffsetY;
whichArt.style.left = positionX + 'px';
whichArt.style.top = positionY + 'px';
}, false);
}

document.querySelector('#draggables').addEventList ener('dragstart', moveStart, false);
document.querySelector('#draggables').addEventList ener('dragover', moveDragOver, false);
document.querySelector('#draggables').addEventList ener('drop', moveDrop, false);

document.querySelector('#draggables').addEventList ener('touchstart', touchStart, false);

})();


} else {
this.src = this.src.replace("_on","_off");

//stop the drag and drop function

}
$(this).toggleClass("on");
});
{
}


Any ideas on how to make this work?