html5对图像的拖放问题的简单分析

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    #div1,#div2
    {
    float:left;width:100px;height:35px;
    margin:10px;padding:10px;border:1px solid #aaaaaa;
    }
    </style>
    <script type="text/javascript">
     function allowDrop(ev)
     {
      ev.preventDefault();
     }
     function drag(ev)
     {
      ev.dataTransfer.setData("Text",ev.target.id);
     }
     function drop(ev)
     {
      ev.preventDefault();
      var data=ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data));
     }
    </script>
<title></title>
</head>
<body>
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)">
<img src="../pic/123.jpg" dragable="true" οndragstart="drag(event)" id="drag1">
</div>
<div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
</body>
</html>
<!-- 其实我们来看怎样实现在两个方格中实现图片的拖放,一开始我们要将图片放在一个框框里面为了实现这个要求我们在首先是<div ></div>在这个标签之间加上一个图片,
我们设置图片在第一个方格里面,现在我们要将图片拖动带第二个方格里面,我们对图片也要记性进行属性的设置,特别的是当我们将图片拖到目的地时候,我们在目的地也要进行属性的设置,目的地怎样来实现的,在这个程序中是我们一开始定义的方格是时候用到的style这个标签,在这个标签里面我们定义的要#div1,#div我们在body里面将这样的两个定义作为是<div>这个标签的属性id的值,在div这个标签里面我们除了对id这个属性应用之外,还有就是
ondrop和ondragover这个两个属性值进行赋值,在赋值的时候用到的javaScript中的函数,其实也可以说赋值的时候是调用函数进行赋值的,并且函数的参数都是event这个值,img中定义 是属性也是三个,对于src这个属性除外,一个是id,一个是dragable和ondragstart这三个属性,这个程序在body中实现拖放我们需要做的 也就是那么多,那么在head之间我们还要对定义的函数进行调用script中的函数-->
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值