Dragging different image on drag of a particular image using jquery

Question

I am developing a html5 telematics app. My requirement is that i have a master window and on drag (open/close) of that, other windows should get dragged (open/close). Kindly help me know how could this be done. Below is my code

      var div_FrontRight= $('<div/>', { id: 'FrontLeft'});
      var div_FrontLeft= $('<div/>', { id: 'FrontLeft'});
       var div_Master= $('<div/>', { id: 'Master'});
       var div_RearRight= $('<div/>', { id: 'RearRight'});
       var div_RearLeft= $('<div/>', { id: 'RearLeft'});


       $("#AnimationWindow").append(div_FrontLeft);
       $("#AnimationWindow").append(div_Master);
       $("#AnimationWindow").append(div_RearRight);
       $("#AnimationWindow").append(div_RearLeft);


       var img_FrontLeft= $('<img/>', { id: 'imgFrontLeft', src:'../images/car.jpg'});
       var img_Master= $('<img/>', { id: 'imgMaster', src:'../images/car.jpg'});
       var img_RearRight= $('<img/>', { id: 'imgRearRight', src:'../images/car.jpg'});
       var img_RearLeft= $('<img/>', { id: 'imgRearLeft', src:'../images/car.jpg'});



       $("#FrontLeft").append(img_FrontLeft);
       $("#Master").append(img_Master);
       $("#RearRight").append(img_RearRight);
       $("#RearLeft").append(img_RearLeft);

       var div_stop= $('<div/>', { id: 'stop'});
       $("#AnimationWindow").append(div_stop);


       $( "#imgFrontLeft" ). draggable
({ 
    axis: "y" ,
    containment:[0,152,0,290] 
});
       $( "#imgMaster" ). draggable
({ 
    axis: "y", 
    containment:[0,158,0,430] 

});
       $( "#imgRearRight" ). draggable
({ 
    axis: "y",
    containment:[0,337,0,470
});
       $( "#imgRearLeft" ). draggable
({ 
    axis: "y", 
    containment:[0,337, 0,470] 
 });

Individual Images independently are dragged. But my Requirement is that, On drag of Master, The other 4 windows also should be dragged. Is this Possible ? If yes then please help with the same.

Thanks in advance !!

score 0 · Answer 1 · answered Feb 08 '13 at 07:41

Try this

   var div_FrontRight= $('<div/>', { id: 'FrontLeft'});
   var div_FrontLeft= $('<div/>', { id: 'FrontLeft'});
   var div_Master= $('<div/>', { id: 'Master'});
   var div_RearRight= $('<div/>', { id: 'RearRight'});
   var div_RearLeft= $('<div/>', { id: 'RearLeft'});


   $("#AnimationWindow").append(div_FrontLeft);
   $("#AnimationWindow").append(div_Master);
   $("#AnimationWindow").append(div_RearRight);
   $("#AnimationWindow").append(div_RearLeft);


   var img_FrontLeft= $('<img/>', { id: 'imgFrontLeft', src:'../images/car.jpg'});
   var img_Master= $('<img/>', { id: 'imgMaster', src:'../images/car.jpg'});
   var img_RearRight= $('<img/>', { id: 'imgRearRight', src:'../images/car.jpg'});
   var img_RearLeft= $('<img/>', { id: 'imgRearLeft', src:'../images/car.jpg'});



   $("#FrontLeft").append(img_FrontLeft).children(img_FrontLeft).draggable
   ({ 
        axis: "y" ,
        containment:[0,152,0,290] 
   });
   $("#Master").append(img_Master).children(img_Master).draggable
   ({ 
        axis: "y",
        containment:[0,337,0,470]
   });
   $("#RearRight").append(img_RearRight).children(img_RearRight).draggable
   ({ 
        axis: "y",
        containment:[0,337,0,470]
   });
   $("#RearLeft").append(img_RearLeft).children(img_RearLeft).draggable
   ({ 
        axis: "y", 
        containment:[0,337, 0,470] 
   });

   var div_stop= $('<div/>', { id: 'stop'});
   $("#AnimationWindow").append(div_stop);

@Roshan Kumar, Thanks a lot for the Response. I tried doing this but that didnt solve my purpose. My actual requirement is, Once i start dragging img_Master, The other four images should be dragged by themselves. It could be imagined like "A Driver Master Controlling all the Windows Opening Closing Activity in a Car" — swati, Feb 08 '13 at 08:49
@swati This is `Rohan Kumar` not `Roshan Kumar`. If you are using `jquery ui draggable` then use `callback` function like `$( ".selector" ).draggable({drag: function( event, ui ) {//your code}});` here is the docs http://api.jqueryui.com/draggable/#event-drag — Rohan Kumar, Feb 08 '13 at 09:20
sorry for misspelling your name. i checked the docs link u suggested. Tried editing my code according to it. Following link would help you know what i was trying to do. http://stackoverflow.com/questions/14809283/how-to-trigger-dragging-of-image-with-drag-of-other-image-using-jquery Kindly check this question and help me know if i am heading in right way. Thanks a ton !! I would be very grateful if i could achieve this. — swati, Feb 11 '13 at 10:25

Dragging different image on drag of a particular image using jquery

1 Answers1