jquery ++放下功能

Question

嗨即時嘗試使一個darg和放下問題。

我想上面使用這種++代碼： 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') 
      }; 
     }; 
}); 

任何人都可以點我在正確的方向？

Answer 1

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（顏色的懸浮窗）：

.dropped { 
    background-color: red; 
} 

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

DEMO：http://jsfiddle.net/3NkZM/273/

Answer 2

或者測試內容

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)]); 
} 

DEMO

Answer 3

您可以嘗試JQuery的可拖動也。
只需顯示一個示例，您可以根據需要進行製作。
DEMO

注： Dragabbles不會在觸摸屏設備正常工作，除非ü添加JQuery的觸摸衝牀插件。

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') 
    } 
    } 
});