Hi all, it should be simple, but I am not good at javascript yet and can't solve this by myself.

I have a drag and drop function, that works and a bargraph that I want to update everytime drag and drop is successful.

My problem is, at the moment the bar graph can be updated only by typing the value into a textfield, not by drag and drop. I am using the code from the http://www.jscraft.net/experiments/h...nd-jquery.html

I was trying to change the code, but unsuccessfully, since I do not get the bar graph code completely.

Can somebody point me what and how I need to change in a bar graph code so it updates automatically everytime drag and drop event is true.

My drag and drop javascript:
Code:
        <script type="text/javascript">
            var dndSupported; //true if drag and drop supported
            var sourceID;
            var payloads = {
                img1:"sweets",
                img2:"apple"
            };
            
            function detectDragAndDrop(){
                if(navigator.appName=='Microsoft Interner Explorer'){
                    var ua=navigator.userAgent;
                    var re=newRegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
                    if(re.exec(ua)!=null){
                        var rv=parseFloat(RegExp.$1);
                        if(rv>=6.0)return true;
                    }
                    return false;
                }
                if('draggable' in document.createElement('span')) return true;
                return false;
            }
            
            function handleDragStart(event){
                sourceID = this.id;
                statusMessage('drag started('+payloads[sourceID]+')');
            }
            
            function handleDrop(event){
                if(event.preventDefault) event.preventDefault();
                statusMessage('received drop: '+payloads[sourceID]);
                if(payloads[sourceID]==="sweets"){
                    var myVideo = document.getElementById('introSnack');
                    myVideo.src = "video/Sweet.m4v";
                    myVideo.load();
                    myVideo.play();                   

                } else if(payloads[sourceID]==="apple"){
                    var myVideo = document.getElementById('introSnack');
                    myVideo.src = "video/Apple.m4v";
                    myVideo.load();
                    myVideo.play();             
                }
            }
            
            function handleDragOver(event){
                if(event.preventDefault) event.preventDefault();
                return false;
            }
            
            function init(){
                if((dndSupported=detectDragAndDrop())){
                    statusMessage('Using HTML5 Drag and Drop');
                    element('img1').addEventListener('dragstart', handleDragStart, false);
                    element('img2').addEventListener('dragstart', handleDragStart, false);
                    element('dz1').addEventListener('dragover', handleDragOver, false);
                    element('dz1').addEventListener('drop', handleDrop, false);
                }else{
                    statusMessage('This browser does not support Drag and Drop');
                }
            }
            window.onload=function(){
                init();
            }

        </script>
the Bar graph code:
Code:
$(function(){
    
    var input = $('.input'),
        bar = $('.bar'),
        bw = bar.width(),
        percent = bar.find('.percent'),
        circle = bar.find('.circle'),
        ps =  percent.find('span'),
        cs = circle.find('span'),
        name = 'rotate';
        
    input.on('keydown', function(e){
        if (e.keyCode == 13){
            var t = $(this), val = t.val();
            if (val >=0 && val <= 100){
                var w = 100-val, pw = (bw*w)/100,
                    pa = {
                        width: w+'%'
                    },
                    cw = (bw-pw)/2,
                    ca = {
                        left: cw
                    }
                ps.animate(pa);
                cs.text(val+'%');
                circle.animate(ca, function(){
                    circle.removeClass(name)
                }).addClass(name);    
            } else {
                alert('range: 0 - 100');
                t.val('');
            }
        }
    });

    //         
    var e = jQuery.Event("keydown");
    e.keyCode = e.which = 13; // # Some key code value
    $(input).trigger(e);

    
});
Thank you in advance.