如何使用JavaScript或jQuery一次拖动多个元素？

| 我希望能够使用jQuery拖动一组元素，就像我选择并拖动Windows桌面上的多个图标一样。我找到了threedubmedia \的jQuery.event.drag演示： http://threedubmedia.com/code/event/drag/demo/multi http://threedubmedia.com/code/event/drag#demos 我认为这个插件很棒。这是一个很好的受欢迎的图书馆吗？您知道使用它的网站或应用程序吗？是否有其他库或插件可以拖动多个对象？ jQuery UI可以拖动多个对象吗？

已邀请:

8 个回复

俯乡骚钵皆

jQuery UI中有Draggable 您要做的就是：

$(selector).draggable(); // and you are done!

在此处查看示例：http://jsfiddle.net/maniator/zVZFq/ 如果您确实要进行多重拖动，则可以尝试使用一些单击事件将块固定在适当的位置

$(\'.drag\').draggable();

$(\'.drag\').click(function(){
    console.log(this, \'clicked\')
    var data = $(this).data(\'clicked\');
    var all = $(\'.all\');
    if(data == undefined || data == false){
        $(this).data(\'clicked\', true);
        this.style.background = \'red\';
        $(this).draggable(\'disable\');
        if(all.children().length <= 0){
            all.draggable().css({
                top: \'0px\',
                left: \'0px\',
                width: $(window).width(),
                height: $(window).height(),
                \'z-index\': 1
            });
        }
        var top = parseInt(all.css(\'top\').replace(\'px\',\'\')) +
                    parseInt($(this).css(\'top\').replace(\'px\',\'\'))
        var left = parseInt(all.css(\'left\').replace(\'px\',\'\')) +
                    parseInt($(this).css(\'left\').replace(\'px\',\'\'))
        $(this).css({
            top: top,
            left: left
        })
        $(\'.all\').append($(this));
    }
    else {
        $(this).data(\'clicked\', false);
        this.style.background = \'grey\';
        $(this).draggable(\'enable\');
        $(\'body\').append($(this));
        if(all.children() <= 0){
            all.draggable(\'destroy\');
        }
        /*
        var top = parseInt(all.css(\'top\').replace(\'px\',\'\')) -
                    parseInt($(this).css(\'top\').replace(\'px\',\'\'))
        var left = parseInt(all.css(\'left\').replace(\'px\',\'\')) -
                    parseInt($(this).css(\'left\').replace(\'px\',\'\'))
        $(this).css({
            top: top,
            left: left
        })*/
    }
})

在此处查看示例：http://jsfiddle.net/maniator/zVZFq/5

董碘奴星

var selectedObjs;
var draggableOptions = {
    start: function(event, ui) {
        //get all selected...
        selectedObjs = $(\'div.selected\').filter(\'[id!=\'+$(this).attr(\'id\')+\']\');
    },
    drag: function(event, ui) {
        var currentLoc = $(this).position();
        var orig = ui.originalPosition;

        var offsetLeft = currentLoc.left-orig.left;
        var offsetTop = currentLoc.top-orig.top;

        moveSelected(offsetLeft, offsetTop);
    }       
};

$(document).ready(function() {
    $(\'#dragOne, #dragTwo\').draggable(draggableOptions);
});

function moveSelected(ol, ot){
    console.log(selectedObjs.length);
    selectedObjs.each(function(){
        $this =$(this);
        var pos = $this.position();

        var l = $this.context.clientLeft;
        var t = $this.context.clientTop;

        $this.css(\'left\', l+ol);
        $this.css(\'top\', t+ot);
    })
}

死狸蔽垂藐

我是threedubmedia插件的作者。我添加了此功能来支持多个元素，因为在其他任何地方都找不到令人满意的解决方案。如果您需要与jQuery UI一起使用的解决方案，则可以使用此插件添加一些多拖动功能，尽管这些演示在Mac版Firefox中似乎无法正常运行。 http://www.myphpetc.com/2009/11/jquery-ui-multiple-draggable-plugin.html

舜辉

这对我有用。在这里摆弄：

var selectedObjs;
var draggableOptions = {
start: function(event, ui) {
    //get all selected...
    if (ui.helper.hasClass(\'selected\')) selectedObjs = $(\'div.selected\');
    else {
        selectedObjs = $(ui.helper);
        $(\'div.selected\').removeClass(\'selected\')
    }
},
drag: function(event, ui) {
    var currentLoc = $(this).position();
    var prevLoc = $(this).data(\'prevLoc\');
    if (!prevLoc) {
        prevLoc = ui.originalPosition;
    }

    var offsetLeft = currentLoc.left-prevLoc.left;
    var offsetTop = currentLoc.top-prevLoc.top;

    moveSelected(offsetLeft, offsetTop);
    selectedObjs.each(function () {
           $(this).removeData(\'prevLoc\');
        });
    $(this).data(\'prevLoc\', currentLoc);
}
};

$(\'.drag\').draggable(draggableOptions).click(function()     {$(this).toggleClass(\'selected\')});


function moveSelected(ol, ot){
console.log(\"moving to: \" + ol + \":\" + ot);
selectedObjs.each(function(){
    $this =$(this);
    var p = $this.position();
    var l = p.left;
    var t = p.top;
    console.log({id: $this.attr(\'id\'), l: l, t: t});


    $this.css(\'left\', l+ol);
    $this.css(\'top\', t+ot);
})
}

感谢ChrisThompson和green提供的几乎完美的解决方案。

芳菱挨啡

我想添加（在Google中排名较高），因为该线程中的所有插件均不起作用，并且jquery ui（一种简单的优雅解决方案）也不支持它的诞生。将可拖动元素包装在容器中，并使用事件一次将其全部拖动，这允许使用单拖动对象和多拖动对象（但不是真正的选择性拖动对象）。

jQuery(document).click(function(e) {

  if(e.shiftKey) {
      jQuery(\'#parent-container\').draggable();
  }
});

禽兢玫坞劲

看一下这个： https://github.com/someshwara/MultiDraggable 用法：$(\".className\").multiDraggable({ group: $(\".className\")}); 将元素组拖在一起。组也可以是指定各个元素的数组。喜欢：$(\"#drag1\").multiDraggable({ group: [$(\"#drag1\"),$(\"#drag2\") ]});

距相镭

将您的物品放入某个容器中，并使该容器可拖动。您需要将handle选项设置为item元素的类。同样，拖动后您将需要重新计算项目的位置。显然，当您取消选择项目时，必须将其从此容器中取出并放回原点。

痴浪墨

这是我使用的，在我的情况下有效。

function selectable(){
$(\'#selectable\').selectable({
  stop: function() {
    $(\'.ui-selectee\', this).each(function(){
        if ($(\'.ui-selectee\').parent().is( \'div\' ) ) {
            $(\'.ui-selectee li\').unwrap(\'<div />\');
        }


    });

    $(\'.ui-selected\').wrapAll(\'<div class=\\\"draggable\\\" />\');

    $(\'.draggable\').draggable({ revert : true });   
  }
});

};

要回复问题请先登录或注册

如何使用JavaScript或jQuery一次拖动多个元素？

8 个回复

发起人

jquery

javascript

drag_and_drop

jquery_ui

jquery_plugins

问题状态

如何使用JavaScript或jQuery一次拖动多个元素？

与内容相关的链接

8 个回复

发起人

jquery

javascript

drag_and_drop

jquery_ui

jquery_plugins

问题状态