13

スタックオーバーフローで質問するのはこれが初めてなので、何か間違っていたらごめんなさい。私はjqueryも初めてですが、読書とチュートリアルを通じて、実際の例を作成することができました。

以下のコードは私が作成したものです。これは、要件をドラッグできる 3 つのリストと、要件をドロップできる 3 つのプレースホルダーがあることを意味します。プレースホルダー 1 はリスト 1 の項目のみを受け入れ、プレースホルダー 2 はリスト 2 の項目のみを受け入れ、プレースホルダー 3 はリスト 3 の項目のみを受け入れます。要件をドラッグすると、プレースホルダーが強調表示されるため、ユーザーはドロップできる場所がわかります。

それでは質問です: このコードを切り抜く方法はありますか? 私はこれが最善の方法ではないと感じています.2つの単語だけが変化している同じコードの3倍です。チュートリアルから学んだように: 決して 2 回は書かないでください。

また別の質問: 要件がプレースホルダーにドロップされたときに、それらの間に線を作成することは可能ですか? ユーザーに 1 つのプレースホルダーをクリックしてもらい、別のプレースホルダーをクリックして接続を描画してもらいたいと思います。html5 キャンバスと jsPlumb を使用した多くの例を既に見ましたが、そのすべての機能は必要ありません。クリックすると、プレースホルダー間の 1 行のみ。

$(function() {
    $( "#requirements" ).accordion();
    $( "#requirements ul li" ).draggable({ 
    appendTo: "body", 
    helper: "clone" 
});

$( ".row1 .placeholder" ).droppable({ //makes row1 .placeholder a droppable area
     accept: "#requirements .row1 li ", 
     activeClass: "ui-state-hover",
     drop: function( event, ui ) {
        var $this = $(this);
        $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
        $this.droppable('disable').addClass("highlighted");
     }
});

$( ".row2 .placeholder" ).droppable({ //makes row2 .placeholder a droppable area
     accept: "#requirements .row2 li ", 
     activeClass: "ui-state-hover",
     drop: function( event, ui ) {
        var $this = $(this);
        $this.find( ".placeholder" ).remove();
        $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
        $this.droppable('disable').addClass("highlighted");
     }
});

$( ".row3 .placeholder" ).droppable({ //makes row3 .placeholder a droppable area
     accept: "#requirements .row3 li ", 
     activeClass: "ui-state-hover",
     drop: function( event, ui ) {
        var $this = $(this);
        $this.find( ".placeholder" ).remove();
        $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
        $this.droppable('disable').addClass("highlighted");
    }    
});

言ったように、私はjqueryが初めてなので、良い説明を歓迎します。前もって感謝します！

ロブ

4

3 に答える 3

3

行クラスまたは変更が必要なパラメーターを挿入して、再利用しているオブジェクトを返す関数を作成します。

function getSettings(rowClass){
    var obj ={ //makes row1 .placeholder a droppable area
      accept: "#requirements "+rowClass+" li ", 
      activeClass: "ui-state-hover",
      drop: function( event, ui ) {
        var $this = $(this);
        $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
        $this.droppable('disable').addClass("highlighted");
      }
    }
    return obj;
}

次に、のように呼び出します$( ".row2 .placeholder" ).droppable(getSettings(".row2")。テストしていませんが、動作するはずです。ユースケースが説明したものである場合、静的ではない部分を関数パラメーターに変更するだけで十分です。

jQuery へようこそ!

于 2013-08-09T08:06:09.037 に答える
2

このようなものが動作するはずです

var rowArr = [".row1", ".row2", ".row3"];
$(rowArr).each(function(curr) {
    $(curr + " .placeholder").droppable({
        accept: "#requirements " + curr + " li",
        /*rest of the code remains the same*/
    });
});
于 2013-08-09T08:07:24.310 に答える
0

次のように使用してはどうでしょうか。

    $( ".row1 .placeholder, .row2 .placeholder, .row3 .placeholder" ).droppable({ //makes row1 .placeholder a droppable area
var rowClass = [".row1",".row2", ".row3"];
$(rowClass).each(function(thisrow){
     accept: "#requirements" +  thisrow + "li ", 
         activeClass: "ui-state-hover",
         drop: function( event, ui ) {
            var $this = $(this);
            $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
            $this.droppable('disable').addClass("highlighted");
         }
});
    });
于 2013-08-09T08:29:38.160 に答える