問題描述

我想用 jQuery 插件 jquery.event.drag

I want to drag multiple elements with the jQuery plugin jquery.event.drag

這是 原始演示的小提琴:

這里是原始演示的鏈接:

在演示中，用戶點擊他想要選擇的方塊并拖動它們.

On the demo, the user clicks on squares he wants to select and drag them.

但我想做一些最簡單的事情:只需點擊方塊1"并移動所有方塊.

But i want to do something simplest : Just click on the square "1" and move all the squares.

我嘗試了不同的東西，結果并不好，請看這個小提琴:

I've tried different things and the result is not good, see this fiddle :

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

你能幫我解決這個問題嗎?

Can you help me to that that ?

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

EDIT The link given in Rajagopal's answer is ok. I've also found this plugin MultiDraggable which is really easy to use : https://github.com/someshwara/MultiDraggable

推薦答案

你必須這樣做，

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

這是工作 示例.希望這篇文章能幫到你.

Here is the working sample. Hope, this one will help you.

對于這種情況，您可以簡單地使用 jquery-ui 可拖動插件.看看這個 http://jqfaq.com/how-to-drag-the-multiple-elements-with-jquery-ui-draggable/.Hoep，這個可以幫助你！

You can simply use jquery-ui draggable plugin for this case. Take a look at this http://jqfaq.com/how-to-drag-the-multiple-elements-with-jquery-ui-draggable/. Hoep, this one will help you!

這篇關于使用 jquery.event.drag 拖動多個元素的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！