Привязка событий перетаскивания к изображениям в div - jquery - PullRequest
Новая
       20

Привязка событий перетаскивания к изображениям в div - jquery

1 голос
/ 08 февраля 2012

У меня есть несколько изображений, и я хочу привязать перетаскиваемые события к каждому изображению, используя jquery .. 

<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'

})

Но для нескольких изображений, как я могу привязать перетаскивание к каждому изображению? Я пробовал ниже код ... но это не работает 

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

$(this).draggable( {

      cursor: 'move',
      revert: 'invalid'

    });

});

Ответы [ 2 ]

2 голосов
/ 08 февраля 2012

Вы могли бы сделать 

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

})
2 голосов
/ 08 февраля 2012

Как @Nicola справедливо говорит, что вы можете напрямую использовать dragabble на селекторе: 

$("#draggableImages img").draggable({
    containment: '#dropbox',
    cursor: 'move'
});

См. Рабочую демонстрацию: http://jsfiddle.net/CX8B2/

Но просто чтобы продемонстрировать, что вы также можете использовать JQuery.Each метод, Примерно так: 

$("#draggableImages img").each(function(i){
 $(this).draggable({ //this refers to each image
    containment: '#dropbox',
    cursor: 'move',
    revert: 'invalid'
})
});

i - это счетчик, а $(this) относится к каждому изображению.

...