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

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

这是原始演示的小提琴 ：

这是原始演示的链接：

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

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

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

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

你能帮那我吗？

HTML代码：

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

Answer 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 }); } });​ 

这是工作样本 。 希望，这一个会帮助你。

编辑：

您可以在这种情况下使用jquery-ui draggable插件。 看看这个http://jqfaq.com/how-to-drag-the-multiple-elements-with-jquery-ui-draggable/ 。 哎呀，这一个会帮到你！

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

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"); }) 

Answer 4

在原来的jsfiddle变化

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

至

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