Question

我知道我在做一些愚蠢的事情，并且非常感谢一些建议。

我已经动态创建了包含四个图像的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

Answer 1

从drag中删除DIV课程。

或者将jQuery函数重写为$('img.drag').draggable()。

Answer 2

您在draggable()类的所有元素上调用.drag。您的容器还具有.drag类（以及您的图像）。因此，您的容器被拖动（其中包含所有图像）。

可拖动div中的图像作为一组拖动

2 个答案: