Drag and Drop

Drag and Drop

Hello Everyone,

I have a problem with a drag and drop script. It works in Firefox Opera and Safari, but not in Internet explorer 7 or 8.

If you look in IE the template of the site is also broken, but I think this is just a CSS issue, and think I can handle that, but the drag and drop function is also not working.

This is the source:

<h1>Schakelreplacers - Configurator</h1>
<!--<script type="text/javascript" src="js/jquery-1.3.1.js"></script>-->
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://threedubmedia.googlecode.com/files/jquery.event.drag-1.4.js"></script>
<script type="text/javascript" src="http://threedubmedia.googlecode.com/files/jquery.event.drop-1.2.js"></script>
<style type="text/css">
.blok {
    width: 900px;
    overflow:hidden;
}

.blok div {
    width:90px;
    height:165px;
    float:left;
}
.replacer{
    cursor:move;
    position:absolute;
    z-index:2;
}
.box2{
    float:left;
    width:90px;
    overflow:hidden;
    border: 1px solid black;
}
.box2 span{
    float:left;
}
.active{
    background:#457845;
    border:1px solid #558755;
}

img.rp {
    width: 90;
    height: 165;
}
</style>
<script type="text/javascript">

   
$(function(){
    var divId;
    $('div.replacer')
    .bind( 'dragstart', function( event ){
        $.dropManage({ mode: $('#mode').val() });
        divId = $(this).attr('id');
       
        return $( this ).clone()
        .appendTo( this.parentNode )
        .css({
            opacity: .5,
            top: event.offsetY,
            left: event.offsetX
        });
    })
    .bind( 'drag', function( event ){
        $( event.dragProxy ).css({ top:event.offsetY, left:event.offsetX - 160 });
    })
    .bind( 'dragend', function( event ){
        $( event.dragProxy ).fadeOut();
    });
   
    $('div.box2')
    .bind( 'dropstart',function(){
        $( this ).addClass('active');
    })
    .bind( 'drop', function( event ){
        $( this ).html('<div class="box2"'+$('div#'+divId+'').html()+'</div>');
    })
    .bind( 'dropend', function( event ){
        $( this ).removeClass('active');
    })
    .bind('dblclick', function() {
        $( this ).text("");
    });
});

   
</script>
<div width="100%" height="400px">
    <div class="blok" id="blok1">
        <div class="box"><div class="replacer" id="r1"><img class="rp" src="images/B1.png" /></div></div>
        <div class="box"><div class="replacer" id="r2"><img class="rp" src="images/B2.png" /></div></div>
        <div class="box"><div class="replacer" id="r3"><img class="rp" src="images/B3.png" /></div></div>
        <div class="box"><div class="replacer" id="r4"><img class="rp" src="images/B4.png" /></div></div>
        <div class="box"><div class="replacer" id="r5"><img class="rp" src="images/B5.png" /></div></div>
        <div class="box"><div class="replacer" id="r6"><img class="rp" src="images/B6.png" /></div></div>
        <div class="box"><div class="replacer" id="r7"><img class="rp" src="images/B7.png" /></div></div>
    </div>

    <div>&nbsp;</div>

    <div class="blok" id="blok2">
        <div class="box2"></div>
        <div class="box2"></div>
        <div class="box2"></div>
        <div class="box2"></div>
        <div class="box2"></div>
        <div class="box2"></div>
        <div class="box2"></div>
    </div>
<div>&nbsp;</div>   
    <div>Prijs €<span id="prijs"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Aanvragen" /></div>

</div>

<div style="position: absolute; bottom: 25; right: 25;">Prijs €<span id="geld"></span></div>



The place where it is used is:
http://lieverhuren.ncamade.nl/configuratie/schakelreplacers_configurator.asp

I hope someone can help me?

Kind regards,
You Gina