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

【问题标题】：Drag multiple elements with jquery.event.drag使用 jquery.event.drag 拖动多个元素
【发布时间】：2012-12-27 13:41:27
【问题描述】：

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

这是fiddle of the original demo：

这是original demo的链接：

在演示中，用户点击他想要选择的方块并拖动它们。

但我想做一些最简单的事情：只需点击方块“1”并移动所有方块。

我尝试了不同的东西，结果并不好，请看这个小提琴：

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

【问题讨论】：

标签： javascript jquery jquery-ui jquery-plugins drag-and-drop

【解决方案1】：

你必须这样做，

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

这是工作的sample。希望这篇文章能帮到你。

编辑：

对于这种情况，您可以简单地使用 jquery-ui 可拖动插件。看看这个http://jqfaq.com/how-to-drag-the-multiple-elements-with-jquery-ui-draggable/。 Hoep，这个可以帮助你！

【讨论】：

谢谢，这就是我想做的。这很奇怪，但小提琴工作正常，但是当我在我的项目中使用这段代码时，我的元素的拖动非常缓慢。我会检查我的代码。唯一的区别是我尝试拖动更复杂的 div（带图像、段落）。也许插件不支持。
谢谢。我还发现这个插件非常好用：github.com/someshwara/MultiDraggable
是的，这些元素在小提琴中仍然非常滞后。

【解决方案2】：

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/

【讨论】：

感谢您创建这个小提琴。这很好，但我想做一些稍微不同的事情。我希望只有在拖动方形 1 时才拖动方形 2 和方形 3（在小提琴中，我们可以通过选择方形 2 和方形 3 来拖动方形 2 和方形 3）。

【解决方案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");
})

【讨论】：

【解决方案4】：

在原来的jsfiddle改

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

到

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

【讨论】：

感谢您的回答。这很好，但我想做一些稍微不同的事情。我希望只有在拖动方形 1 时才拖动方形 2 和方形 3（在您的代码中，我们可以选择所有方形）。