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”，如果为真，则向 dropzone 添加一个“正确”类）

$('.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（为 dropzone 着色）：​</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 回答