以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 SVG/GML/VRML/X3D/XAML 』  (http://bbs.xml.org.cn/list.asp?boardid=21)
----  [求助]如何让鼠标器移动物件  (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=25057)

--  作者：dogg1634
--  发布时间：12/6/2005 6:58:00 PM

--  [求助]如何让鼠标器移动物件
怎么利用javascript写一个移动svg物件的程序?
譬如我点下鼠标器左键后可以拖曳所选到的物件…希望有人帮我解答..谢谢
--  作者：柯西
--  发布时间：3/25/2006 3:15:00 PM

--  
我也想知道,和楼主一起等大侠指教吧
--  作者：DragonJohn
--  发布时间：3/25/2006 5:31:00 PM

--  
onmousedown
onmousemove
onmouseup
evt.getClientX()
evt.getClientY()
setAttribute("x",newX);
setAttribute("y",newY);

只能提示到这了。

--  作者：lisa_apple
--  发布时间：6/27/2007 3:58:00 PM

--  
参见http://bbs.xml.org.cn/dispbbs.asp?boardid=21&id=38498&star=1#98160
--  作者：定风波
--  发布时间：4/6/2008 11:17:00 AM

--  
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <head>
 
 <script>
   <![CDATA[
   var dx,dy;
   var circle;

   function init()
   {
     circle = document.getElementById('circ');
     circle.addEventListener("mousedown", mousedown_listener, false);
   }     

   function mousedown_listener(evt)
   {
     dx = circle.cx.baseVal.value - evt.clientX;
     dy = circle.cy.baseVal.value - evt.clientY;
     document.addEventListener("mousemove", mousemove_listener, true);
     document.addEventListener("mouseup", mouseup_listener, true);
   }

   function mouseup_listener(evt)
   {
     document.removeEventListener("mousemove", mousemove_listener, true);
     document.removeEventListener("mouseup", mouseup_listener, true);
   }

   function mousemove_listener(evt)
   {
     var id = circle.ownerSVGElement.suspendRedraw(1000);
     circle.cx.baseVal.value = evt.clientX + dx;
     circle.cy.baseVal.value = evt.clientY + dy;
// alternatively we could set the corresponding attributes:
// (slower method)
//     circle.setAttribute("cx", evt.clientX + dx);
//     circle.setAttribute("cy", evt.clientY + dy);
     circle.ownerSVGElement.unsuspendRedraw(id);
   }

   ]]>
 </script>
  </head>
  <body onload="init();">
 <h3>SVG + event handler demo</h3>

    <p>Drag the circle with the mouse!</p>
 <svg:svg width="600px" height="400px">
   <svg:polyline points="0,0 600,0 600,400 0,400 0,0" style="stroke: black; fill: none;"/>
   <svg:circle id="circ" r="1cm" cx="5cm" cy="3cm" style="fill: red; stroke: blue; stroke-width: 3;"/>
 </svg:svg>
  </body>
</html>

W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 62.500ms