使用jquery拖动特定图像时拖动不同的图像

时间:2013-02-08 07:21:17

标签: jquery html5 jquery-draggable

我正在开发一个html5远程信息处理应用程序。 我的要求是我有一个主窗口和拖动(打开/关闭),其他窗口应该被拖动(打开/关闭)。 请帮助我知道如何做到这一点。 以下是我的代码

      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] 
 });

单独拖动单个图像。但是我的要求是,在Master的拖拽下,其他4个窗口也应该被拖动。 这可能吗 ?如果是,那么请帮助。

提前致谢!!

1 个答案:

答案 0 :(得分:0)

试试这个

   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);