如何选中并拖动 iframe里的图片对象

现在只是实现了基本插入图片功能，如果实现可点中并随意拖动插入到iframe的图片呢？我自己试了试，没弄出来。。请大侠帮忙！<script>
var imgsrclink="http://119.img.pp.sohu.com/images/blog/2007/9/1/15/19/1155a300520.jpg";
function showifra()
{
var img =window.frames["ifra"].document.createElement('img');
img.src=imgsrclink;
img.id="img1"window.frames["ifra"].document.getElementById("img").appendChild(img)
}
</script>
</head>
<body>
  <button onclick="showifra()"> 加入图片 </button>
  <iframe id="ifra" name="ifra" src="test.html" width="800" height="300"></iframe>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

设置图片的style="position:absolute"
然后判断鼠标左键是否按在图片上：图片onclick时间中判断是否为鼠标左键,并记录住鼠标点下时的坐标
如果是，判断鼠标的移动：document.onmousemove，鼠标当前的坐标与鼠标点下时的坐标比较，再将图片的位置作相应的移动
网上找了个例子改改了，还是不对，我js初学，请大侠帮下，谢谢！<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
var imgsrclink="http://119.img.pp.sohu.com/images/blog/2007/9/1/15/19/1155a300520.jpg";
function showifra()
{
var img =window.frames["ifra"].document.createElement('img');
img.src=imgsrclink;
img.id="img1"
img.style.position="absolute";
img.ondrag=doDrag;
img.onmouseover="this.style.cursor='hand'"
img.onmousedown=doMouseDown;
window.frames["ifra"].document.getElementById("img").appendChild(img)
}
var orgMouseX;
var orgMouseY;
var orgObjX;
var orgObjY;
function doDrag() {
  var myObject=document.all.myDiv; //这里好像有问题，原例是在div中
  var x=event.clientX;
  var y=event.clientY;
  myObject.style.left=x-(orgMouseX-orgObjX);
  myObject.style.top=y-(orgMouseY-orgObjY);
}
function doMouseDown() {
  orgMouseX=event.clientX;
  orgMouseY=event.clientY;
  orgObjX=parseInt(document.all.myDiv.style.left); /这里好像有问题，原例是在div中
  orgObjY=parseInt(document.all.myDiv.style.top);
} </script>
</head>
<body>
  <button onclick="showifra()"> 加入图片 </button>
  <iframe id="ifra" name="ifra" src="test.html" width="800" height="300"></iframe>
</body>
</html>
lihui_shine 说的对，
大致就是这样的一个步骤了
晕死
举一个简单的例子吧：
<script   language="JavaScript">
  var   dragapproved=false
  var   eventsource,x,y
  function   move()
    {
      if (dragapproved)
        {
          eventsource.style.left=parseInt(temp1+x)+"px"
          eventsource.style.top=parseInt(temp2+y) +"px"
          return   false
        }
    }
  function   drags(obj)
    {
      if   (!document.all)   return
  //alert(obj.className)
      if   (obj.className=="drag")
        {
          dragapproved=true
          eventsource=obj
          temp1=obj.style.posLeft
          temp2=obj.style.posTop
          x=100
          y=100;
          obj.onmousemove=move
        }
    }
//document.onmousedown=drags
  document.onmouseup=new   Function("dragapproved=false")
  </script>
<script>
var imgsrclink="http://119.img.pp.sohu.com/images/blog/2007/9/1/15/19/1155a300520.jpg";
function showifra()
{
var img =window.frames["ifra"].document.createElement('img');
img.src=imgsrclink;
img.id="img1";
img.className="drag";
img.onmousedown=function(){parent.drags(this)};
window.frames["ifra"].document.getElementById("img").appendChild(img)
}
</script>  <button onclick="showifra()"> 加入图片 </button>
  <iframe id="ifra" name="ifra" src="test.html" width="800" height="300"></iframe>
test.html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
  .drag{position:absolute;cursor:pointer;}
  </style>

</head><body>
<div id="img" style="width:800px; height:300px;"></div>
</body>
</html>
<script   language="JavaScript">
  var   dragapproved=false
  var   eventsource,x,y
  function   move()
    {
      if (dragapproved)
        {
var ox=window.frames[0].event.clientX;
var oy=window.frames[0].event.clientY;
          eventsource.style.left=parseInt(ox+temp1-x)+"px"
          eventsource.style.top=parseInt(ox+temp2-y) +"px"
          return   false
        }
    }
  function   drags(obj)
    {
      if   (!document.all)   return
  //alert()
      if   (obj.className=="drag")
        {
          dragapproved=true
          eventsource=obj
          temp1=obj.style.posLeft
          temp2=obj.style.posTop
          x=window.frames[0].event.clientX
          y=window.frames[0].event.clientY ;
          obj.onmousemove=move
        }
    }
  document.onmouseup=new   Function("dragapproved=false")
  </script>
<script>
var imgsrclink="http://119.img.pp.sohu.com/images/blog/2007/9/1/15/19/1155a300520.jpg";
function showifra()
{
var img =window.frames["ifra"].document.createElement('img');
img.src=imgsrclink;
img.id="img1";
img.className="drag";
img.onmousedown=function(){parent.drags(this)};
window.frames["ifra"].document.getElementById("img").appendChild(img)
}
</script>  <button onclick="showifra()"> 加入图片 </button>
  <iframe id="ifra" name="ifra" src="test.html" width="800" height="300"></iframe>
  改下，如果要做到精确就自己慢慢改吧
上面有一个地方错了
eventsource.style.left=parseInt(ox+temp1-x)+"px"
          eventsource.style.top=parseInt(ox+temp2-y) +"px"
应该是
eventsource.style.left=parseInt(ox+temp1-x)+"px"
          eventsource.style.top=parseInt(oy+temp2-y) +"px"   红色部分