Javascript Callback to modify the object where it belongs

I'm trying to execute a callback that is declared in an object (Photo), from another object that has a list of "Photos" (Gallery) I want that callback function to modify the exact object where it belongs. I have something like this:

var photo= function(){
 this.Id;
 this.Url;
 this.someCallBack = function(event, ui, object){
  this.Id = object.Id;
  this.Url = object.Url;
 }
}

var gallery = function(){
 this.Name;
 this.PhotoList = new Array();
 this.Draw = function(){
  for(var i =0; i < this.PhotoList.length; i++){
   var self = this;
   $('#'+this.PhotoList[i].Id).droppable({drop:function(event, ui){
    self.PhotoList[i].someCallBack(event, ui开发者_运维技巧, new{Id = 15, Url = 'someUrl.jpg'});
   }
   });
  }
 }
}

The event is drop (from jquery ui droppable), I tried but it does't work, there is an "cannot call method 'someCallBack' of undefined" error.

The objetive is to modify the original objects from the list in "gallery" in every callback so I can take the list after I've finished the dragging and save it.

Is there a way to achieve the behavior I described before??

I'd appreciate any help.

Thanks

Apart from the invalid declaration of someCallback in photo function, you can try to use $('#somePhoto').data('the-photo-object', photo) to store your photo object, and use $('#somePhoto').data('the-photo-object') to retrieve your photo object from a jQuery element in your drop event callback will save you some headache.

Instead of

{drop:function(event, ui){
    self.PhotoList[i].someCallBack(event, ui, new{Id = 15, Url = 'someUrl.jpg'});
}}

This would be less confusing:

// creating a new photo object and assigning it to a jquery element
var aPhoto = new photo();
$('#draggable-photo').data('the-photo-object', aPhoto);

// retrieving photo objects from the dom that is being dragged.
{drop:function(event, ui){
   var droppable = $(this);
   var draggable = ui.draggable;
   // assuming draggable is photo, droppable is gallery
   var photo = draggable.data('the-photo-object');
   photo.someCallBack(event, ui, new{Id = 15, Url = 'someUrl.jpg'});
}}

From this little code snippet, I don't really follow the flow of the code or see enough info to put it into a jsFiddle, so I'll just comment on errors I see.

I don't see any place in your code where you're actually assigning the someCallback function to your object. Perhaps you mean for this code:

var photo= function(){
 this.Id;
 this.Url;
 this.someCallBack(event, ui, object){
    this.Id = object.Id
    this.Url = object.Url
 }
}

to be this which actually attaches the function to the object, removes some no-op statements, change "object" to "obj" so there's never any confusion about the "Object" class and adds missing semi-colons:

var photo = function(){
    this.someCallBack = function(event, ui, obj){
        this.Id = obj.Id;
        this.Url = obj.Url;
    }
 }

Also missing a lot of semi-colons at the end of lines and unsure why you're passing event and ui to the someCallback function when you're not using them.