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> </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> </div>
<div>Prijs €<span id="prijs"></span> <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