backbone view with draggable events should work on iOS but doesn't

DashboardProductView.js

Garmin.msc.Views.DashboardProductView = Backbone.View.extend({
	//this is the view for a single selected product in
	//the dashboard (the dashboardCollection) and should.
	className:"product-dashboard",
	events: {
		// "mouseenter .display":"goOver",
		// "mouseleave .display":"goOut",
		"dragstart":"startDrag",
		"dragstop":"stopDrag",
		"drag":"whileDragging",
		"click":"mainClick",
		"click .menu .info":"goInfo",
		"click .productinfo-overlay .close":"closeInfo",
		"click .menu .trash":"goTrash",
		"mousedown":"bringMeUp"
	},
	initialize: function() {
		console.log("dashboard product view initialized!");
		//var self = this;
		this.pixelsPerInch = this.options.pixelsPerInch;
		this.model.bind("destroy",this.destroyMe,this);
		this.model.bind("change",this.changeMe,this);
		//this.render();
		this.template = this.options.template;
		this.compiled = _.template(this.template);
	},
	changeMe:function(mymodel) {
		console.log("dashboardProductView changeMe here!");
		var dashboardPixelWidth = $("#marine-configurator .container_24").width();
		var wval = $('#dashwidth-update').val();
		this.pixelsPerInch = Math.floor(dashboardPixelWidth / wval);
		var myimg = this.$(".display img");
		var dims = mymodel.get("dimensions");
		var imgwidth = dims.width;
		var imgheight = dims.height;
		if (imgwidth.indexOf('”') != -1) {
			imgWidth = imgWidth.substr(0,imgwidth.indexOf('”'));
		}
		if (imgheight.indexOf('”') != -1) {
			imgheight = imgheight.substr(0,imgheight.indexOf('”'));
		}
		var newWidth = Math.floor(imgwidth * this.pixelsPerInch);
		var newHeight = Math.floor(imgheight * this.pixelsPerInch);
		myimg.width(newWidth + "px");
		myimg.height(newHeight + "px");
	},
	render: function() {
		var modeljson = this.model.toJSON();
		var jel = $(this.el);
		jel.html(this.compiled(modeljson));
		jel.css({"left":modeljson.x + "px","top":modeljson.y});
		var myimg = jel.find(".display img");
		var testimg = this.$(".display img");
		var imgwidth = modeljson.dimensions.width;
		var imgheight = modeljson.dimensions.height;
		if (imgwidth.indexOf('”') != -1) {
			imgWidth = imgWidth.substr(0,imgwidth.indexOf('”'));
		}
		if (imgheight.indexOf('”') != -1) {
			imgheight = imgheight.substr(0,imgheight.indexOf('”'));
		}
		var newWidth = Math.floor(imgwidth * this.pixelsPerInch);
		var newHeight = Math.floor(imgheight * this.pixelsPerInch);
		myimg.width(newWidth + "px");
		myimg.height(newHeight + "px");
		$(this.el).draggable({
			containment:"parent"
		}).css("position","absolute");

		console.log("dashboard product render here! ", myimg);
		return this;
	},
	bringMeUp: function(e) {
		console.log("dashboardProductView bringMeUp here!");
		//this.trigger("bringToFront",this.el);
		this.trigger("bringToFront",this);
	},
	// bringToFront:function(e) {
	// 	//$(this.el).css("z-index",)
	// 	console.log("bringToFront inside a dashboard product signle item view. ");
	// 	var whatIndex = $(this.el).css("z-index");
	// 	this.trigger("bringToFront",this);
	// },
	destroyMe:function(args) {
		console.log("dashboardProductView destroyMe called!");
		$(this.el).remove();

	},
	startDrag:function(e,ui){
		//e.preventDefault();
		//var whatIndex = $(this.el).css("z-index");
		//this.trigger("bringToFront",this);
		//this.$(".menu").hide();
		console.log("dashboardProductView startDrag here hey yo!",e,ui);
	},
	whileDragging: function(e,ui) {
		var pos = ui.position;
		//$(this.el).append("x: " + pos.left + " y: " + pos.top);
		console.log("hey, we're dragging! x: " + pos.left + " y: " + pos.top);
	},
	stopDrag: function(e,ui) {
		//when we're done dragging, update
		//this view's model with the new x and y positions. 
		//which will trigger the collection's change
		//event which will in turn trigger the collection
		//to save?
		//e.preventDefault();
		this.$(".menu").show();
		var pos = ui.position;
		console.log("dashboardProductView stopDrag here. e, ui::: ", e, ui, pos);
		this.model.save({
			x:pos.left,
			y:pos.top
		});
	},
	mainClick:function(){
		console.log("dashboardProductView mainClick here.", this.$(".menu"));
		//this.trigger("bringToFront",this);
		if (this.$(".menu").is(":hidden")) {
			this.$(".menu").show();
		} else {
			this.$(".menu").hide();
			
		}
		
	},
	goOver:function(){
		//show the edit menu here
		this.$(".menu").show();
	},
	goOut:function(e){
		//hide the edit menu here
		this.$(".menu").hide("fast");
	},
	goInfo: function(e){
		e.preventDefault();
		this.$(".productinfo-overlay").show("fast");
	},
	goTrash:function(e) {
		e.preventDefault();
		this.model.destroy();
		
	},
	closeInfo:function(e){
		e.preventDefault();
		this.$(".productinfo-overlay").hide("fast");
	}

});