使用jquery.event.drag拖动多个元素

Question

我想使用jQuery插件 jquery.event.drag 来拖动多个元素。

这里是原始演示的fiddle链接：

这里是原始演示的链接：

在演示中，用户点击要选择并拖动的正方形。

但我只想做一件更简单的事情：只需点击正方形“1”并移动所有正方形。

我尝试了不同的方法，但结果不好，请查看此fiddle链接：

http://jsfiddle.net/Vinyl/gVFCL/2/

你能帮我完成吗？

HTML代码：

<div class="drag" style="left:20px;"></div>
<div class="drag" style="left:100px;"></div>
<div class="drag" style="left:180px;"></div>

CSS 代码

.drag {
    position: absolute;
    border: 1px solid #89B;
    background: #BCE;
    height: 58px;
    width: 58px;
    cursor: move;
    top: 120px;
}
.selected {
    background-color: #ECB;
    border-color: #B98;
    }

jQuery

jQuery(function($){
    $('.drag')
        .click(function(){
            $( this ).toggleClass("selected");
        })
        .drag("init",function(){
            if ( $( this ).is('.selected') )
                return $('.selected');
        })
        .drag(function( ev, dd ){
            $( this ).css({
                top: dd.offsetY,
                left: dd.offsetX
            });
        });
});

编辑 Rajagopal的答案中提供的链接是可以的。 我还发现了这个插件MultiDraggable，它非常容易使用：https://github.com/someshwara/MultiDraggable

- Sébastien Gicquel

Answer 1

jQuery(function($) {

    $('.drag').drag("init", function() {
        if ($(this).is('#test')){
            return $('.selected');
        }
    }).drag(function(ev, dd) {
        $( this ).css({
                top: dd.offsetY,
                left: dd.offsetX
            });
    });
});

示例 http://jsfiddle.net/gVFCL/3/

- Jose Vega

---

感谢您创建这个代码片段。虽然它很好，但我想做一些略微不同的事情。我希望只有在拖动正方形1时才能拖动正方形2和正方形3（在这个代码片段中我们可以通过选中正方形2和正方形3来拖动它们）。 - Sébastien Gicquel

Answer 2

您需要像这样做：

$('.drag').drag("init", function(ev, dd) {
    if (this.id == "test") {
        return $(".drag").addClass("selected");
    }
}).drag(function(ev, dd) {
    if (ev.target.id == "test") {
        $(this).css({
            top: dd.offsetY,
            left: dd.offsetX
        });
    }
});​

这里是可用的示例。希望这个能帮到你。

编辑：

你可以简单使用jquery-ui拖放插件来实现此功能。看一下这个http://jqfaq.com/how-to-drag-the-multiple-elements-with-jquery-ui-draggable/。希望这个能帮到你！

- Rajagopal 웃

---

谢谢，这正是我想做的。很奇怪，JSFiddle 运行良好，但当我在我的项目中使用此代码时，元素的拖动非常卡顿。我会检查我的代码。唯一的区别是我尝试拖动更复杂的 div（带有图像、段落）。也许插件不支持这种情况。 - Sébastien Gicquel

谢谢。我还发现了这个插件，非常容易使用：https://github.com/someshwara/MultiDraggable - Sébastien Gicquel

是的，这些元素在 Fiddle 中仍然非常卡顿。 - Dylan Cross

Answer 3

我的代码升级了多拖动和多选择：

http://jsfiddle.net/F4AwY/

$('.drag').drag("init", function() {
  return $('.selected');
}).drag(function(ev, dd) {
    $( this ).css({
       top: dd.offsetY,
       left: dd.offsetX
    });
});

$('div[class*="drag"]').click(function(){
    $(this).toggleClass("selected");
})

- Rafaelox

Answer 4

在原始的jsfiddle中进行更改

.click(function(){
        $(this).toggleClass("selected");
    })

至

.click(function(){
        $('.drag').toggleClass("selected");
    })

- Chaitanya Munipalle

---

谢谢你的回答。很好，但我想做一些略微不同的事情。如果拖动正方形1（在您的代码中，我们可以选择所有正方形），我只想拖动正方形2和正方形3。 - Sébastien Gicquel