Ajax 板


LINE

※ 引述《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







like.gif 您可能会有兴趣的文章
icon.png[问题/行为] 猫晚上进房间会不会有憋尿问题
icon.pngRe: [闲聊] 选了错误的女孩成为魔法少女 XDDDDDDDDDD
icon.png[正妹] 瑞典 一张
icon.png[心得] EMS高领长版毛衣.墨小楼MC1002
icon.png[分享] 丹龙隔热纸GE55+33+22
icon.png[问题] 清洗洗衣机
icon.png[寻物] 窗台下的空间
icon.png[闲聊] 双极の女神1 木魔爵
icon.png[售车] 新竹 1997 march 1297cc 白色 四门
icon.png[讨论] 能从照片感受到摄影者心情吗
icon.png[狂贺] 贺贺贺贺 贺!岛村卯月!总选举NO.1
icon.png[难过] 羡慕白皮肤的女生
icon.png阅读文章
icon.png[黑特]
icon.png[问题] SBK S1安装於安全帽位置
icon.png[分享] 旧woo100绝版开箱!!
icon.pngRe: [无言] 关於小包卫生纸
icon.png[开箱] E5-2683V3 RX480Strix 快睿C1 简单测试
icon.png[心得] 苍の海贼龙 地狱 执行者16PT
icon.png[售车] 1999年Virage iO 1.8EXi
icon.png[心得] 挑战33 LV10 狮子座pt solo
icon.png[闲聊] 手把手教你不被桶之新手主购教学
icon.png[分享] Civic Type R 量产版官方照无预警流出
icon.png[售车] Golf 4 2.0 银色 自排
icon.png[出售] Graco提篮汽座(有底座)2000元诚可议
icon.png[问题] 请问补牙材质掉了还能再补吗?(台中半年内
icon.png[问题] 44th 单曲 生写竟然都给重复的啊啊!
icon.png[心得] 华南红卡/icash 核卡
icon.png[问题] 拔牙矫正这样正常吗
icon.png[赠送] 老莫高业 初业 102年版
icon.png[情报] 三大行动支付 本季掀战火
icon.png[宝宝] 博客来Amos水蜡笔5/1特价五折
icon.pngRe: [心得] 新鲜人一些面试分享
icon.png[心得] 苍の海贼龙 地狱 麒麟25PT
icon.pngRe: [闲聊] (君の名は。雷慎入) 君名二创漫画翻译
icon.pngRe: [闲聊] OGN中场影片:失踪人口局 (英文字幕)
icon.png[问题] 台湾大哥大4G讯号差
icon.png[出售] [全国]全新千寻侘草LED灯, 水草

请输入看板名称,例如:BuyTogether站内搜寻

TOP