4

jQueryプラグインjquery.event.dragで複数の要素をドラッグしたい

これが元のデモのフィドルです：

元のデモへのリンクは次のとおりです。

デモでは、ユーザーは選択したい正方形をクリックしてドラッグします。

しかし、私は最も簡単なことをしたいのです。正方形「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
            });
        });
});

編集ラジャゴパルの答えで与えられたリンクは大丈夫です。私はまた、このプラグインMultiDraggableを見つけました。これは本当に使いやすいです：https ：//github.com/someshwara/MultiDraggable

4

4 に答える 4

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/をご覧ください。ホープ、これはあなたを助けるでしょう！

于 2012-12-27T14:36:32.240 に答える
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/

于 2012-12-27T13:53:07.360 に答える
2

私のコードは、マルチドラッグとマルチセレクトをアップグレードします:

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");
})
于 2013-08-02T16:57:25.380 に答える
1

元のjsfiddleの変更で

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

に

.click(function(){
        $('.drag').toggleClass("selected");
    })
于 2012-12-27T13:56:30.197 に答える