jquery - 将拖动事件绑定(bind)到 div 中的图像 - jquery

Question

我有多个图像，我想使用 jquery 将可拖动事件绑定(bind)到每个图像..

<div class="dragdemo">
    <div id="draggableImages" class="ui-widget-content">

        <img id="img1" src="images/coffee_i_l_ny.png"/>
        <img id="img2" src="images/bird_twitter.png"/>  
        <img id="img3" src="images/safari.png"/>
        <img id="img4" src="images/traffic_cone.png"/>
        <img id="img5" src="images/skype.png"/> 
    </div>

    <div id="dropbox" class="ui-widget-header" ></div>

</div>

对于单个图像，我可以使用这个...

$(#img1).draggable( {
    containment: '#dropbox',
    cursor: 'move',
    revert: 'invalid'

})

但是对于多个图像，我如何将拖动绑定(bind)到每个图像？我尝试了下面的代码..但它不起作用

$("#draggableImages img").bind('drag' , function() {

$(this).draggable( {

      cursor: 'move',
      revert: 'invalid'

    });

});

Answer 1

你可以做

 //this select all the images that are descendants of the element with id=draggableImages 
$('#draggableImages img').draggable( {
    containment: '#dropbox',
    cursor: 'move',
    revert: 'invalid'

})