|
 |
| |
รบกวนช่วยดูให้ทีนะพี่ๆ อยากจะลากสินค้าได้อยู่ในกรอบด้่านล่าง |
| |
 |
|
|
 |
 |
|
Code (PHP)
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>JQuery Drag & Drop Cart</title>
<script type="text/javascript" src="jquery_dragdrop_cart/jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery_dragdrop_cart/jquery-ui-1.8.9.custom.min.js"></script>
<style type="text/css">
body {
font-family: Arial, "Free Sans";
margin: 0;
padding: 0;
background-color: #000000;
}
#main {
background: #0099cc;
margin-top: 0;
padding: 2px 0 4px 0;
text-align: center;
}
#main a {
color: #ffffff;
text-decoration: none;
font-size: 12px;
font-weight: bold;
font-family: Arial;
}
#main a:hover {
text-decoration: underline;
}
#item_container {
width: 610px;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
}
.item {
background: #fff;
float: left;
padding: 5px;
margin: 5px;
cursor: move;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
box-shadow: 0 1px 2px rgba(0,0,0,.5);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
z-index: 5;
}
.title,.iid, .price { /* ????? .iid ?????? -------------------------------------------------------------------------------------------------- */
display: block;
text-align: center;
font-size: 14px;
letter-spacing: -1px;
font-weight: bold;
cursor: move;
}
.title {
color: #333;
}
.iid { /* ????? .iid ?????? ------------------------------------------------------------------------------------------------------------ */
color: #333;
}
.price {
color: #0099cc;
margin-top: 5px;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
}
.icart, .icart label {
cursor: e-resize;
}
.divrm {
text-align: right;
}
.remove {
text-decoration: none;
cursor: pointer;
font-weight: bold;
font-size: 20px;
position: relative;
top: -7px;
}
.remove:hover {
color: #999;
}
.clear {
clear: both;
}
#cart_container {
margin: 0 auto;
width: 495px;
}
#cart_title span {
border: 8px solid #666;
border-bottom-width: 0;
background: #333;
display: block;
float: left;
color: #fff;
font-size: 11px;
font-weight: bold;
padding: 5px 10px;
-webkit-border-radius: .5em .5em 0 0;
-moz-border-radius: .5em .5em 0 0;
border-radius: .5em .5em 0 0;
}
#cart_toolbar {
overflow: hidden;
border: 8px solid #666;
height: 190px;
z-index: -2;
width: 483px;
-webkit-border-radius: 0 .5em 0 0;
-moz-border-radius: 0 .5em 0 0;
border-radius: 0 .5em 0 0;
background: #ffffff;
}
#cart_items {
height: 190px;
width: 483px;
position: relative;
padding: 0 0 0 2px;
z-index: 0;
cursor: e-resize;
border-width: 0 2px;
}
.back {
background: #e9e9e9;
}
#navigate {
width: 463px;
margin: 0 auto;
border: 8px solid #666;
border-top-width: 0;
-webkit-border-radius: 0 0 .5em .5em;
-moz-border-radius: 0 0 .5em .5em;
border-radius: 0 0 .5em .5em;
padding: 10px;
font-size: 14px;
background: #333;
font-weight: bold;
}
#nav_left {
float: left;
}
#nav_left a {
padding: 4px 8px;
background: #fff;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
text-decoration: none;
color:#0099cc;
}
#nav_left a:hover {
background: #666;
color: #fff;
}
#nav_right {
float: right;
}
.sptext {
background: #ffffff;
padding: 4px 8px;
margin-left: 8px;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
color: #666;
}
.count {
color: #0099cc;
}
.drop-active {
background: #ffff99;
}
.drop-hover {
background: #ffff66;
}
</style>
<script type="text/javascript">
var total_items = 0;
var total_price = 0;
//---------------------------------------
var items=new Array(); //array ????????????????
//---------------------------------------
$(document).ready(function() {
$(".item").draggable({
revert: true
});
$("#cart_items").draggable({
axis: "x"
});
$("#cart_items").droppable({
accept: ".item",
activeClass: "drop-active",
hoverClass: "drop-hover",
drop: function(event, ui) {
var item = ui.draggable.html();
var itemid = ui.draggable.attr("id");
var html = '<div class="item icart">';
html = html + '<div class="divrm">';
html = html + '<a onclick="remove(this)" class="remove '+itemid+'">×</a>';
html = html + '<div/>'+item+'</div>';
$("#cart_items").append(html);
//---------------------------------------------------
var idna = ui.draggable.attr("id"); //??????? id ??????????? array ?????????????????????
if(items.length==0)
{
items[0]=idna;
}
else
{
items[items.length]=idna;
}
//----------------------------------------------------
// update total items
total_items++;
$("#citem").html(total_items);
// update total price
var price = parseInt(ui.draggable.find(".price").html().replace("$ ", ""));
total_price = total_price + price;
$("#cprice").html("$ " + total_price);
// expand cart items
if (total_items > 4) {
$("#cart_items").animate({width: "+=120"}, 'slow');
}
}
});
$("#btn_next").click(function() {
$("#cart_items").animate({left: "-=100"}, 100);
return false;
});
$("#btn_prev").click(function() {
$("#cart_items").animate({left: "+=100"}, 100);
return false;
});
$("#btn_clear").click(function() {
$("#cart_items").fadeOut("2000", function() {
$(this).html("").fadeIn("fast").css({left: 0});
});
$("#citem").html("0");
$("#cprice").html("$ 0");
//----------------------------------------------------------
items.splice(0,items.length);//?? array ????????????????? clear
//----------------------------------------------------------
total_items = 0;
total_price = 0;
return false;
});
});
function remove(el) {
$(el).hide();
$(el).parent().parent().effect("highlight", {color: "#ff0000"}, 1000);
$(el).parent().parent().fadeOut('1000');
setTimeout(function() {
$(el).parent().parent().remove();
// collapse cart items
if (total_items > 3) {
$("#cart_items").animate({width: "-=120"}, 'slow');
}
}, 1100);
// update total item
total_items--;
$("#citem").html(total_items);
// update totl price
//-------------------------------------------------------------------------------????????????????????????????????????????
var iid = $(el).parent().parent().find(".iid").html().replace("$ ", "");
//---------------------------------------------------------------------------????????????????????????????????????????
var price = parseInt($(el).parent().parent().find(".price").html().replace("$ ", ""));
total_price = total_price - price;
$("#cprice").html("$ " + total_price);
//?? array ?????????????????????????---------------------------------------------------------------------------------------------
for(var i=0; i<=(items.length); i++)
{
if(iid==items[i])
{
items.splice(i,1);
}
}
//?? array ?????????????????????????----------------------------------------------------------------------------------------------
}
</script>
</head>
<body>
<? $DBServer = "localhost";
$DBName = "shoponline";
$DBUsername = "root";
$DBPassword = "root";
$conn = mysql_connect($DBServer, $DBUsername , $DBPassword ) or die("Could not connect to dbserver");
mysql_select_db($DBName,$conn);
mysql_query("SET NAMES UTF8");
$result=mysql_query("select * from product");
while($dbarr=mysql_fetch_array($result))
{
echo "<div id=\"item_container\">";
echo "<div>";
echo "<a href=\"#\" class=\"item\" id=\"$dbarr[ID]\">";
echo "<img src=\"/phpmydream/".$dbarr[pic]."\" width=\"100\" height=\"90\"/>";
echo "<div>";
echo "<label class=\"iid\">".$dbarr[ID]."</label>";
echo "<label class=\"title\">".$dbarr[name]."</label>";
echo "<label class=\"price\">".$dbarr[price]."</label>";
echo "</div>";
echo "</a>";
echo "</div>";
} ?>
<div class="clear"></div>
</div>
<div id="cart_container">
<div id="cart_title">
<span>Shopping Cart</span>
<div class="clear"></div>
</div>
<div id="cart_toolbar">
<div id="cart_items" class="back"></div>
</div>
<div id="navigate">
<div id="nav_left">
<a href="" id="btn_prev"><</a>
<a href="" id="btn_next">></a>
<a href="" id="btn_clear">Clear Cart</a>
<!--- ???????????????????????????-->
<input type='button' onClick='GetHasChilds(items)' value="click" name="Input" >
<!--- ???????????????????????????-->
</div>
<div id="nav_right">
<span class="sptext">
<label>Items </label><label class="count" id="citem">0</label>
</span>
<span class="sptext">
<label>Price </label><label class="count" id="cprice">$ 0</label>
</span>
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript" language="javascript">
//--------------------------------------------------???????????????????????
function GetHasChilds(id){
location ='sale.php?id='+id
}
//-----------------------------
</script>
</body>
</html>
คือว่าตอนแรกสามารถที่จะลากสินค้า ได้พี่ แต่พอทำไปทำมาไม่สามารถลากสินค้าได้เลยไม่ทราบว่าเป็นเพราะอะไร
รบกวนช่วยดูให้ทีนะพี่ รบกวนด้วย
Tag : PHP
|
|
|
 |
 |
 |
 |
| Date :
2012-01-30 13:35:38 |
By :
oxegen |
View :
971 |
Reply :
1 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ขอบคุนนะพี่ทำได้แล้วค่ะ
|
| |
|
|
| |
| Date :
2012-01-30 15:01:23 |
By :
oxegen |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 00
|
