Ho postato il codice javascript di una pagina che gestisce riempimento/svuotamento di un carrello spesa con trascinamento prodotti.
Chiedo per cortesia se qualcuno sa indicarmi il codice corretto per inserire in un database i prodotti presenti nel carrello tramite un pulsante di invio.
Ciao grazie a tutti
<html>
<head>
<title>Drag and Drop in Javascript</title>
<style type="text/css">
<!--
#main {
width: 600px;
text-align: center;
margin-right: auto;
margin-left: auto;
padding: 5px;
}
#basket {
background: #FFFFCC url(cart.gif) no-repeat left top;
border: 1px solid #999999;
height: 200px;
width: 500px;
margin: 20px;
padding-left: 40px;
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-align: left;
}
#trash {
background: #CCCC66 url(trash.gif) no-repeat left top;
border: 1px dashed #999999;
height: 40px;
width: 500px;
margin: 20px;
font: 12px Verdana, Arial, Helvetica, sans-serif;
padding: 10px;
padding-left: 40px;
}
-->
</style>
</head>
<body>
<div id="main">
<a href="#" onClick="json_enum();return false;" title="informazioni carrello"><img src="info.gif" alt="info" width="70" height="70" border="0"></a>
<img alt="Oggetto prova uno" src="product2.gif" id="item_top" class="drag" width=75 height=71>
<img alt="Oggetto prova due" src="product3.gif" id="item_sx" class="drag" width=65 height=65>
<img alt="Oggetto prova tre" src="product4.gif" id="item_dx" class="drag" width=75 height=72>
<img src="product5.gif" alt="Oggetto prova quattro" name="item_bottom" width=75 height=72 class="drag" id="item_bottom">
<div id="basket" class="basket"><b>Trascina qui i prodotti per aggiungerli al carrello.</b></div>
<div id="trash" class="trash"><i>Sposta qui i prodotti dal carrello per cancellarli.</i></div>
</div>
<script type="text/javascript" >
var oDrag = null
var drag = false
var leave = false
var oBasket,x,y
var oJson=new Object()
var oJsonIndex = 0
oJson[0] = {src :"",alt:"",display: false}
//for (n in oJson) { alert( n + ' | ' + oJson
.Age + ':' + oJson
.FirstName ) }
function json_enum() {
var cart_item = 0;
for (n in oJson) {
if (oJson
.display) {
cart_item += 1;
alert( n + ' | ' + oJson
.alt ) ;
}
}
if ( cart_item == 0 ) {
alert( "Il carrello è vuoto" );
}
}
function mdown(e) {
/*
funzione per il riconoscimento dell'oggetto da grabbare
*/
// compatibilità crossbrowser
if (!e) var e = window.event;
// grab elemento
oDrag = (e.target) ? e.target : e.srcElement
// verifico se l'elemento è draggabile
if ( oDrag.className=="drag" || oDrag.className=="item" ){
//imposto il postizionamento relativo per permettere il drag
oDrag.style.position = "relative"
// imposto la modalità di drag
drag = true
// prendo le coordinate del mouse
x = e.clientX
y = e.clientY
//abilito l'evento onmousemove e onmouseup
document.onmousemove=mdrag_on
document.onmouseup=mdrag_off
}
else {
// esco dalla la modalità di drag
drag = false
oDrag = null
}
return false
}
function mdrag_on(e) {
/*
funzione di movimento
*/
// compatibilità crossbrowser
if (!e) var e = window.event;
// se siamo in modalità di drag cambio le coordinate dell'elemento
if (drag){
oDrag.style.left = e.clientX -x
oDrag.style.top = e.clientY -y
}
return false
}
function mdrag_off(e) {
/*
funzione di movimento
*/
// compatibilità crossbrowser
if (!e) var e = window.event;
// esco dalla la modalità di drag
drag = false
leave = true
try {
// reimposto le coordinate iniziali
oDrag.style.left = 0
oDrag.style.top = 0
} catch(z) { }
}
function mover(e) {
/*
funzione gestione basket
onmouseover controllo se ho un elemento che stavo strascinando
*/
// compatibilità crossbrowser
if (!e) var e = window.event;
// grab elemento
oBasket = (e.target) ? e.target : e.srcElement
//se ho un l'elemento draggabile , non trovo in modalità grab ,e sono sun basket
try {
if ( oDrag.className=="drag" && oBasket.className=="basket" && leave){
oJsonIndex += 1
oJson[oJsonIndex] = {src: oDrag.src , alt: oDrag.alt , display: true}
/*oBasket.innerHTML += '<div class="item">' + oJsonIndex + '<img width=20 src="' + oDrag.src + '">' + oDrag.alt + '</' + div>'*/
oBasket.innerHTML += '<div id="' + oJsonIndex + '" class="item" style="width: 300px">' + '<img width=20 src="' + oJson[oJsonIndex].src + '">' + oJson[oJsonIndex].alt + '<'+ '/div>'
document.getElementById("trash").innerHTML = "<i>Sposta qui i prodotti dal carrello per cancellarli.</i>"
oDrag = null
}
if ( oDrag.className=="item" && oBasket.className=="trash" && leave){
s = oDrag.id
oJson[s].display = false
oBasket.innerHTML = "L'elemento " + oJson[s].alt + " è stato eliminato dal carrello"
document.getElementById(oDrag.id).style.display='none'
oDrag = null
}
} catch(z) { }
leave = false
return false
}
document.onmousedown=mdown
document.onmouseover=mover
</script>
</body>
</html>
