Mootools: खींचें और ड्रॉप समस्या

मैंने इस प्रश्न को मुट्टूल वेबसाइट पर मंचों से पूछा है और एक व्यक्ति ने कहा है कि एक व्यवस्थापक के साथ आने से पहले मेरा वर्ग चयन दूषित हो गया था और मेरी पोस्ट स्थिति को अमान्य कर दिया गया था। कहने की जरूरत नहीं है कि इससे ज्यादा मदद नहीं मिली। इसके बाद मैंने बिना किसी प्रतिक्रिया के mootools के लिए एक Google समूह में पोस्ट किया। मेरा सवाल यह है कि मेरे '.drop' तत्वों के लिए 'एंटर', 'छोड़ें', 'ड्रॉप' घटनाएं क्यों नहीं होतीं? .drag तत्वों के लिए घटनाएं काम कर रही हैं।

<title>Untitled Page</title>
<script type="text/javascript" src="/SDI/includes/mootools-1.2.js"></script>
<script type="text/javascript" src="/SDI/includes/mootools-1.2-more.js"></script>
<script type="text/javascript" charset="utf-8">
    window.addEvent('domready', function() {
        var fx = [];
        $$('#draggables div').each(function(drag){
            new Drag.Move(drag, {
                droppables: $$('#droppables div'),
                onDrop: function(element, droppable){
                    if(!droppable) {
                    }
                    else {
                        element.setStyle('background-color', '#1d1d20');
                    }
                    element.dispose();
                },
                onEnter: function(element, droppable){
                    element.setStyle('background-color', '#ffffff');
                },
                onLeave: function(element, droppable){
                    element.setStyle('background-color', '#000000');
                }
            });
        });

        $$('#droppables div').each(function(drop, index){
            drop.addEvents({
                'enter': function(el, obj){
                    drop.setStyle('background-color', '#78ba91');
                },
                'leave': function(el, obj){
                    drop.setStyle('background-color', '#1d1d20');
                },
                'drop': function(el, obj){
                    el.remove();
                }
            });
        });
    });
</script>

<form id="form1" runat="server">
<div>
    <div id="draggables">
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
    <div class="drag"></div>
</div>

<div id="droppables">
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
</div>

</div>
</form>