if you take look to this link you may understand what I mean...
http://www.zambakmimarlik.com/CokResim/cokresim.asp
the array that appear above must me written to database.
this is code of this page:
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>deneme</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<script type="text/javascript" src="js/scriptaculous/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous/scriptaculous.js"></script>
<script type="text/javascript">
//<![CDATA[
document.observe('dom:loaded', function() {
var changeEffect;
Sortable.create('sortlist', { tag: 'img', overlap:'horizontal',constraint:false,
onChange: function(item) {
var list = Sortable.options(item).element;
$('changeNotification').update(Sortable.serialize(list).escapeHTML());
if(changeEffect) changeEffect.cancel();
changeEffect = new Effect.Highlight('changeNotification', {restoreColor:"transparent" });
},
onUpdate: function() {
new Ajax.Request("saveImageOrder.asp", {
method: "get",
onLoading: function(){$('activityIndicator').show()},
onLoaded: function(){$('activityIndicator').hide()},
parameters: { data: Sortable.serialize("sortlist") }
});
}
});
});
// ]]>
</script>
<style>
<!--
#sortlist {
width: 300px;
height: 600px;
margin: 0 auto;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #a5a1a1;
text-align:center;
}
#sortlist img.sorting {
float: left;
margin: 4px;
padding: 4px;
border: 1px solid #ccc;
}
#sortlist img.sorting:hover {
float: left;
margin: 4px;
padding: 4px;
border: 1px solid #666;
cursor: move;
}
#activityIndicator, #changeNotification {
text-align: center;
font: normal 1em georgia, arial, helvetica;
}
h1 {
font: normal 2em georgia, arial, helvetica;
margin: 0;
padding: 0;
color: #D35619;
}
#tagLine {
color: #d39819;
margin: 0 0 15px 0;
font-style: italic;
font-size: 1.05em;
font-family: georgia, arial, helvetica;
}
#credits {
font: normal 66% verdana, helvetica, arial;
padding: 0.5em 0;
margin: 2em 0;
border-top: 1px dotted #c0c0c0;
border-bottom: 1px dotted #c0c0c0;
}
-->
</style>
</head>
<body>
<div id="changeNotification"> </div>
<p id="changeNotification"></p>
<div id="activityIndicator" style="display:none; ">Saving image order to database <img src="http://webdesign.torn.be/tutorials/assets/images/loading_indicator.gif" /></div>
<div id="sortlist">
<%
set get_pic=baglan.execute("SELECT * FROM tut_sortImages ORDER BY orderId")
While Not get_pic.eof
%>
<img class="sorting" alt="<%=get_pic("imageCaption")%>" id="pictureId_<%=get_pic("imageId")%>" src="http://www.zambakmimarlik.com/cokresim/rasm/<%=get_pic("imageUrl")%>" width="60px" height="60px"/>
<%
get_pic.MoveNext
Wend
%>
</div>
</body>
</html>
<%
baglan.close
set baglan=nothing
%>
the data is sent to saveimageOrder.asp as array in "data"
I have to parse it and forse to update my database...
the orijinal site is here:
http://webdesign.torn.be/tutorials/j...ith-prototype/
just need to convert that php part into asp
Bookmarks