星空网 > 软件开发 > 网页设计

HTML 5 拖放(Drag 和drop)

浏览器支持

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5。

1、把标签 draggable 属性设置为 true。

2、向标签添加ondragstart 属性调用了一个函数drag(event)。

    function drag(ev){

       ev.dataTransfer.setData("Text",ev.target.id);    }  //设置被拖数据的数据类型和值

3、向要拖放的位置(目标元素)标签添加ondragover属性调用一个函数allowDrop(event)。

    function allowDrop(ev){
       ev.preventDefault();} //避免浏览器对数据的默认处理

4、向要拖放的位置(目标元素)标签添加ondrop属性调用一个函数drop(event)。

    当放置被拖数据时,会发生 drop 事件。

    function drop(ev){
       ev.preventDefault(); //避免浏览器对数据的默认处理
       var data=ev.dataTransfer.getData("Text"); //获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
       ev.target.appendChild(document.getElementById(data));  } //把被拖元素追加到目标元素中

5、示例如下:

<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>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src='/images/loading.gif' data-original="aa.png" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

执行如下:

HTML 5 拖放(Drag 和drop)

我们可将图片来回拖放在div1和div2中。

 




原标题:HTML 5 拖放(Drag 和drop)

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

上评一哥Jeff:https://www.goluckyvip.com/tag/40812.html
尚睿 SainStore :https://www.goluckyvip.com/tag/40816.html
尚优NetSuite:https://www.goluckyvip.com/tag/40817.html
捎客物流:https://www.goluckyvip.com/tag/40818.html
捎客转运:https://www.goluckyvip.com/tag/40819.html
捎客转运物流:https://www.goluckyvip.com/tag/40820.html
三亚有哪些酒店值得入住?:https://www.vstour.cn/a/366173.html
零售晚报:丽人丽妆2023年扭亏为盈 玉容初、美壹堂等自有品牌增速超40% :https://www.kjdsnews.com/a/1836649.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流