作者idcomputer (順)
看板Ajax
標題Re: [問題] 有辦法取得PHP的動態變數?!
時間Fri Sep 19 12:21:20 2008
※ 引述《TonyQ (沉默是金)》之銘言：
: ※ 引述《idcomputer (順)》之銘言：
: : 剛剛測試了一下
: : <div id="<?php echo $row['id']; ?>"...略...onmouseup="alert(this.id)">..</div>
: : 在移動完圖層有ALERT出該圖層的標籤id
: : 那該怎麼去把這個id存在變數中呢?!
: : 如果想要套過ajax的方式用抓取到的id變數與抓取到的圖層座標值(移動過後的)
: : 來更新資料表該如何進行呢?!
: : 大部分ajax書籍都只有點到拖曳圖層就停止了，所以上這來請教大家~~感恩
: 其實完全是觀念的問題...
: 不過如果你還是要提供一下你怎麼實做拖曳的,
: 這樣會比較好告訴你怎麼樣取得那個id.
如下~~~有點長~~~抱歉ORZ
<script type="text/javascript">
//判斷瀏覽器種類
var ns = (navigator.vendor == ("Netscape6") || navigator.product == ("Gecko"));
var ie = (document.all);
var _dragobj,_dragActive=true;
var _dragobj,_dragActive=true;
var _maxi=0,_curri,_className;
//***************************************取得滑鼠游標位置
function mouseMove(e){
//set drag status
_dragActive=false;
//取得滑鼠游標位置
x=(ns)?e.pageX:event.x;
y=(ns)?e.pageY:event.y;
//移動圖層
_dragobj.style.left=(_cx+x)+'px';
_dragobj.style.top=(_cy+y)+'px';
}
function mouseUp(e){
_dragobj.className=_className;
//設定可拖曳狀態
_dragActive=true;
_maxi++;
document.onmousemove=noopMouse;
document.onmousedown=noopMouse;
document.onmouseup=noopMouse;
snapGrid(true);
function mouseDown(e){
dragable=(_dragobj.getAttribute('dragable')=='dragable');
_className=_dragobj.className
_dragobj.className=(dragable)?'op':_className;
//alert(_dragobj.style.filter);
//將目前圖層提到最上層
_dragobj.style.zIndex=_maxi;
//將控制權交給MOUSEMOVE
document.onmousemove=mouseMove;
//取得目前滑鼠與圖層左上角位置的差距
x=(ns)?e.pageX:event.x;
y=(ns)?e.pageY:event.y;
_cx=_dragobj.offsetLeft-x;
_cy=_dragobj.offsetTop-y;
}
function noopMouse(e){
return false;
}
function hitTest(a,b){
//is current layer overlay with other ?
var ax,ay,aw,ah;
var bx,by,bw,bh;
ax=a.offsetLeft;
ay=a.offsetTop;
aw=parseInt(a.style.width);
ah=parseInt(a.style.height);
bx=b.offsetLeft;
by=b.offsetTop;
bw=parseInt(b.style.width);
bh=parseInt(b.style.height);
if((ax+aw)>=bx && ax <=(bx+bw) && (ay+ah) >=by && ay <= (by+bh)){
return true
}else{
return false
}
}
//初始化************************************************
function dragInit(){
var i, a, main,obj;
//檢查所有文件中的DIV標籤，並未DIV加上 Z-INDE的屬性
for(i=0; (a = document.getElementsByTagName("div")[i]); i++) {
obj=document.getElementById(a.getAttribute("id"));
if (obj.style.zIndex==null || obj.style.zIndex==''){
obj.style.zIndex=i;
}
_maxi=Math.max(obj.style.zIndex,_maxi);
}
//記錄目前最大的Z-INDEX值
_maxi++;
}
//避免滑鼠指示停在塗層上就開始動作，增設_dragActive檢查
function startDrag(layerName){
//is this layer dragable?
dragable=(document.getElementById(layerName).getAttribute('dragable')
=='dragable');
//to avoid when mouse over layer, change layer obj
if (_dragActive&&dragable){
if (document.getElementById(layerName)!='null'){
_dragobj=document.getElementById(layerName);
document.onmousedown=mouseDown;
document.onmouseup=mouseUp;
}
}else{
document.onmousemove=noopMouse;
document.onmousedown=noopMouse;
document.onmouseup=noopMouse;
}
}
function snapGrid(b){
var grid=20;
var diffx=parseInt(_dragobj.style.left)%grid;
var diffy=parseInt(_dragobj.style.top)%grid;
if (b){
_dragobj.style.left=parseInt(_dragobj.style.left)+
((diffx>(grid/2))?(grid-diffx):(0-diffx))+'px';
_dragobj.style.top=parseInt(_dragobj.style.top)+((diffy>
(grid/2))?(grid-diffy):(0-diffy))+'px';
}
}
function isDragable(layerName){
//確認圖層是否可移動?
dragable=(document.getElementById(layerName).getAttribute('dragable')
=='dragable');
document.getElementById(layerName).style.cursor='move';
}
function lockDrag(layerName){
document.getElementById(layerName).setAttribute('dragable','fixed');
}
function releaseDrag(layerName){
document.getElementById(layerName).setAttribute('dragable','dragable');
}
</script>
<body onload="dragInit();">
<?php do { ?>
<?php
$x = $row['x'];
$y = $row['y'];
?>
<div id="<?php echo $row['id']; ?>"
dragable="dragable"
class="board"
style="position: absolute;
top: <?php echo $row['y']; ?>px;
left: <?php echo $row['x']; ?>px;
onmouseover="isDragable(this.id);"
onmousedown="startDrag(this.id);"
>
<?php } while ($row = mysql_fetch_assoc($res)); ?>
</body>
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 61.221.166.118