Блог

я знаю, что делаю что-то глупое, и был бы очень признателен за совет.

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

созданные мной div выглядят следующим образом:

 <div id="imageAreaDiv0" class="drag ui-draggable">
    <div id="uconConnectedToUserName02" class="drag ui-draggable">
        <img class="drag ui-draggable" src="UserThumbs_G-L/a/r/harrytushie" alt="harrytushie" title="harrytushie">
    </div>
    <div id="uconConnectedToUserName03" class="drag ui-draggable">
        <img class="drag ui-draggable" src="UserThumbs_G-L/o/e/joeblow" alt="joeblow" title="joeblow">
    </div>
    <div id="uconConnectedToUserName04" class="drag ui-draggable">
        <img class="drag ui-draggable" src="Images/defaultConnectionThumbnail.png" alt="sampleuser000" title="sampleuser000">
    </div>
    <div id="uconConnectedToUserName05" class="drag ui-draggable">
        <img class="drag ui-draggable" src="Images/defaultConnectionThumbnail.png" alt="sampleuser001" title="sampleuser001">
    </div>
</div>
  

css выглядит следующим образом:

 .drag {
margin-right:5px;
display: inline-block;
position: relative;
cursor: move;
}
  

и перетаскивание jQuery выглядит следующим образом:

     $(".target").css({ opacity:"0.5" });

    $(".drag").draggable({
        zIndex: 3});

    $(".target").droppable({
        cursor: 'move',
        drop:  function(event, ui) {
            var message = event.target.id;
            var connectName = $(ui.draggable).attr('alt');
            if(event.shiftKey) {
                var actionTaken = copyConnection(connectName);
            } else {
                var actionTaken = moveConnection(connectName);
            }
            document.getElementById('errorNotificationArea').innerHTML =
                '<span style="color:red;font-size:12px;"><br>Connection ' connectName ' was ' actionTaken ' to category ' message '<br><br></span>';
        }
    })
})(jQuery);
  

но когда я перетаскиваю изображение в эту строку (или любую строку с более чем одним изображением), все изображения в этой строке перемещаются как блок; т. Е. Все они перемещаются одновременно.

если я отключу перетаскивание «обертки» div (id= imageAreaDiv0), изображения не будут перетаскиваться.

если бы кто-нибудь мог сказать мне, что я делаю не так, я был бы очень признателен.

Спасибо! twistOneUp

Удалите drag класс из DIV s.

Или перепишите вашу функцию jQuery на $('img.drag').draggable() .

Вы вызываете draggable() все элементы с классом .drag . Ваш контейнер также имеет класс .drag (как и ваши изображения). Итак, ваш контейнер перетаскивается (со всеми изображениями внутри него).