Jquery 可拖动div中的图像作为一个组进行拖动

我知道我在做一些愚蠢的事情，我真的很想得到一些建议

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

    $(".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);

jQuery拖动的内容如下所示：

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

    $(".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);

$（“.target”）.css（{opacity:“0.5”}）；
$（“.drag”）.draggable({
zIndex:3}）；
$（“.target”）.dropable({
光标：“移动”，
drop：函数（事件、用户界面）{
var message=event.target.id；
var connectName=$（ui.draggable）.attr（'alt'）；
if（事件移位键）{
var actiontake=copyConnection（connectName）；
}否则{
var actiontake=moveConnection（connectName）；
}
document.getElementById（'errorNotificationArea'）.innerHTML=
“
连接”+connectName+”是“+actiontaked+”到类别“+message+”

”；
}
})
})（jQuery）；

但当我拖动这一行中的图像（或任何一行中有多个图像）时，该行中的所有图像都会作为一个块移动；i、 例如，它们都同时移动

如果我在“wrapper”div（id=imageAreaDiv0）上禁用拖动，则图像不会拖动

如果有人能告诉我我做错了什么，我会非常感激

谢谢！

---

twistOneUp

从

DIV

s中删除

拖动类

或者将jQuery函数重写为
$（'img.drag'）.draggable（）
您正在调用
draggable（）
类为
的所有元素。drag
。您的容器还有
.drag
（以及您的图像）类。因此，您的容器正在被拖动（所有图像都在其中）。
抱歉，我无意冒犯您。。。第一次尝试回复留给我的答案，n00b在stackoverflow和所有这些…@RichardNeilagan-我尝试从imageAreaDiv0中删除class='drag ui Dragable'，这使得块中的所有图像都不可拖动。当我在jQuery中指定“img.drag”时出现了相同的结果，当我删除包装图像的div上的“drag”时出现了相同的结果。与上面对RichardNeillagan的第一次响应相同。从“包装器”div中删除class='drag ui draggable'会导致其中包含的所有图像都不可拖动。谢谢你的建议，tho！谢谢看看这个提琴：（）--在IE9、FF6和Chrome 14中对我有用--我从容器元素中删除了
drag
类（让类ui可以拖动）hi swatkins，我想说声谢谢！对于JSFIDLE。。。你的工作很好，我将你的代码复制到我的.php脚本中，你的拖拽，我的拖拽-这是动态生成的，但看起来完全相同-没有。所以这可能与它的生成方式有关。啊，再次非常感谢！