0

こんにちは私はダーグアンドドロップの質問をしようとしています。

私はトップにこの++コードを使用させたい：http： //jsfiddle.net/donejs/3NkZM/light/

ボックスを正しい場合は緑に、正しくない場合は赤に変えてください。

つまり、私はドラッグが正しく、ドラッグして正しくない

私は次のようないくつかの異なる方法を試しました：

    $('.drag').on('draginit', function(ev, drag) {
        // Create a ghost for this drag
        drag.ghost();
    });

    $('.drop').on({

        'dropover' : function(ev, drop, drag) {
            $(this).addClass('highlight');
        },
        'dropout' : function(ev, drop, drag) {
            $(this).removeClass('highlight');
        },
        'dropon' : function(ev, drop, drag) {
            if('#correct') {
                $(this).addClass('green')   
            }
            else {
                $(this).addClass('red') 
            };
        };
});

誰かが私を正しい方向に向けることができますか？

4

3 に答える 3

3

HTML: (どちらが正しいか答えてください)

<div class="drag correct">
    I am a drag
</div>

<div class="drag">
    Drag me, too
</div>

<div class="drop">
    Drop zone
</div>

JS: (ドロップされた要素が「.correct」かどうかを確認し、真の場合は「正しい」クラスをドロップゾーンに追加する必要があります)

$('.drag').on('draginit', function(ev, drag) {
    // Create a ghost for this drag
    drag.ghost();
});

$('.drop').on({
    'dropover' : function(ev, drop, drag) {
        $(this).addClass('highlight');
    },
    'dropout' : function(ev, drop, drag) {
        $(this).removeClass('highlight');
    },
    'dropon' : function(ev, drop, drag) {
        $(this).html('Dropped: ' + drag.element.html());
        $(this).removeClass('highlight');

        $(this).addClass('dropped');
        if($(drag.element).is('.correct')) {
            $(this).addClass('correct');
        } else {
            $(this).removeClass('correct');
        }
    }
});

CSS に追加します (ドロップゾーンに色を付けます): </p> 

.dropped {
    background-color: red;
}

.dropped.correct {
    background-color: green;
}
​

デモ: http://jsfiddle.net/3NkZM/273/

于 2012-12-06T08:44:27.220 に答える
2

JQuery Draggable も試すことができます。
見せるだけのサンプルですので、ご要望に応じて製作いたします。
デモ

注: JQuery Touch Punchプラグインを追加しない限り、Dragabbles はタッチ スクリーン デバイスでは機能しません。

HTML: 

<div id="right_ans" class="drag">
  I am a drag
</div>

<div id="wrong_ans" class="drag">
  Drag me, too
</div>
<div id="drop_target" class="drop">
  Drop zone
</div>

CSS: 

body{
font-family: Helvetica,"Lucida Grande","Lucida Sans",Arial,Helvetica,sans-serif;
}

div {
  padding: 5px;
  margin: 10px;
}

.drag {
  cursor: pointer;
  border: 1px dotted red;
  width: 150px;
  float: left;
}

.drop {
  clear: both;
  border: 1px solid gray;
  width: 200px;
  height: 100px;
  background-color: #EFEFEF;
}

JS: 

$("#right_ans").draggable({
  revert: 'invalid',
  cursor: "move",
  drag: function() {
    $("#right_ans").addClass('dragged');
  }
});

$("#wrong_ans").draggable({
  revert: 'invalid',
  cursor: "move",
  drag: function() {
      $("#wrong_ans").addClass('dragged');
  }
});

$("#drop_target").droppable({
  accept: "#right_ans, #wrong_ans",
  drop: function() {
    if ($('#right_ans').hasClass('dragged')) {
        $(".drop").css('background-color', 'green');
        $('#right_ans').removeClass('dragged')
    }
    if ($('#wrong_ans').hasClass('dragged')) {
        $(".drop").css('background-color', 'red');
        $('#wrong_ans').removeClass('dragged')
    }
  }
});
于 2012-12-06T09:38:45.227 に答える
0

または、コンテンツをテストします

var answers = {"I am a drag":"green","Drag me, too":"red"}

'dropon' : function(ev, drop, drag) {
    var answer = drag.element.html();
    $(this).html('Dropped: ' + answer);
    $(this).removeClass('highlight');
    $(this).addClass(answers[$.trim(answer)]);
}

デモ

于 2012-12-06T09:11:11.803 に答える