图片 4

HTML5 的拖放(实例:四个div之间拖放图片),

 

  最主要表达:

第一,为了使成分(如本图片)可拖动,把 draggable 属性设置为 true :

dataTransfer.setData() 方法设置被拖数据的数据类型和值:

ondragover 事件规定在何处放置被拖动的数量。

暗许地,无法将数据/成分放置到其它因素中。如若必要安装允许放置,大家不可能不遏止对成分的默许处理情势。

那要经过调用 ondragover 事件的 event.preventDefault() 方法:

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

  • 调用 preventDefault() 来幸免浏览器对数码的暗中同意管理(drop
    事件的暗许行为是以链接方式展开)
  • 通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该办法将赶回在
    setData() 方法中安装为一样档期的顺序的别的数据。
  • 被拖数据是被拖成分的 id (“drag1”)
  • 把被拖成分追加到放置成分(指标成分)中

 

结果—-》

拖动前

图片 1

拖动后

图片 2

再拖动回去

图片 3

……..

在八个 <div> 成分之间拖放图像— 代码清单:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            #div1,#div2{ float:left; width:150px; height:50px; margin: 10px; padding: 10px; border: 1px dashed #bbbbbb;}
        </style>
        <script>
            function allowDrag(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>
    </head>

    <body>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrag(event)">
            <img src="1.jpg" width="120px" height="50px" draggable="true" ondragstart="drag(event)" id="drag1" />
        </div>
        <div id="div2" ondrop="drop(event)" ondragover="allowDrag(event)">    
        </div>

    </body>
</html>

 

用HTML5拖放效能编写二个轻松的拖放德姆o

HTML5 拖放成效完结代码,html5拖放达成代码

在HTML5中,拖放是标准的一有个别,任何因素都能够拖放,具体内容如下

1、拖放 

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <style type=”text/css”>  
  5. #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
      
  6. </style>  
  7. <script>  
  8. function allowDrop(ev)   
  9. {   
  10. ev.preventDefault();   
  11. }   
  12. function drag(ev)   
  13. {   
  14. ev.dataTransfer.setData(“Text”,ev.target.id);   
  15. }   
  16. function drop(ev)   
  17. {   
  18. ev.preventDefault();   
  19. var data=ev.dataTransfer.getData(“Text”);   
  20. ev.target.appendChild(document.getElementById(data));   
  21. }   
  22. </script>  
  23. </head>  
  24. <body>  
  25. <p>拖动 W3CSchool.cc 图片到矩形框中:</p>  
  26. <div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>  
  27. <br>  
  28. <img id=”drag1″ src=”/images/logo.png” draggable=”true” ondragstart=”drag(event)” width=”336″ height=”69″>  
  29. </body>  
  30. </html>   

2、设置成分为可拖放
 
首先,为了使成分可拖动,把 draggable 属性设置为 true :<img
draggable=”true”>
 
3、拖动什么 – ondragstart 和 setData()  
然后,规定当成分被拖动时,会时有发生什么。在上面的事例中,ondragstart
属性调用了三个函数,drag(event),它规定了被拖动的数据。dataTransfer.setData()
方法设置被拖数据的数据类型和值:

JavaScript Code复制内容到剪贴板

  1. function drag(ev)   
  2. {   
  3.    ev.dataTransfer.setData(“Text”,ev.target.id);   
  4. }    

在那个例子中,数据类型是 “Text”,值是可拖动成分的 id (“drag1”)。
 
4、放到何地 – ondragover  
ondragover
事件规定在哪里放置被拖动的数据。默许地,不能将数据/成分放置到别的因素中。假诺急需设置允许放置,大家亟须遏止对成分的默许管理方式。那要通过调用
ondragover 事件的 event.preventDefault()
方法:event.preventDefault()  
5、实行停放 – ondrop
 
 当放置被拖数据时,会爆发 drop 事件。在地点的例证中,ondrop
属性调用了一个函数,drop(event):

JavaScript Code复制内容到剪贴板

  1. function drop(ev)   
  2. {   
  3. ev.preventDefault();   
  4. var data=ev.dataTransfer.getData(“Text”);   
  5. ev.target.appendChild(document.getElementById(data));   
  6. }    

代码解释:

调用 preventDefault() 来幸免浏览器对数码的暗许管理(drop
事件的暗中同意行为是以链接格局张开)。通过 dataTransfer.getData(“Text”)
方法取得被拖的数目。该方法将回来在 setData()
方法中装置为同一类其他别的数据。被拖数据是被拖成分的 id
(“drag1”)。把被拖成分追加到放置成分(目的成分)中。

如上便是本文的全体内容,希望对大家的就学抱有支持,也希望我们多多协理帮客之家。

拖放效能实现代码,html5拖放达成代码
在HTML5中,拖放是专门的学业的一片段,任何因素都可以拖放,具体内容如下 1、拖放
XML/HTML Code 复制内…

HTML5拖放效果的落到实处代码,html5拖放代码

拖放

拖放是一种广泛的特性,即抓取对象今后拖到另八个职分。

在 HTML5 中,拖放是行业内部的一部分,任何因素都能够拖放。

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 援助拖动。

注意:Safari 5.1.2不辅助拖动.

实例:

<!DOCTYPE html>  
<html>  
<head>  
    <title>拖放</title>  
    <style type="text/css">  
        #div1{width:360px;height:220px;padding:20px;border:1px solid black;}  
    </style>  
    <script>  
        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>  
</head>  
<body>  
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>  
    <br />  
    <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)"  width="300px" height="180px" />  
</body>  
</html>  

第一,为了使成分可拖动,把draggable 属性设置为 true :<img
draggable=”true”>

接下来,规定当成分被拖动时,会产生哪些。
在上边包车型大巴例子中,ondragstart
属性
调用了七个函数,drag(event),它规定了被拖动的数码。
dataTransfer.setData() 方法设置被拖数据的数据类型和值:

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

在这些事例中,数据类型是 “Text”,值是可拖动成分的 id (“drag1”)。

ondragover 事件鲜明在何地放置被拖动的多少。
私下认可地,不能将数据/成分放置到别的因素中。要是须要安装允许放置,大家务必遏止对元素的默许管理方式。
那要通过调用 ondragover 事件event.preventDefault()
方法
:event.preventDefault()

当放置被拖数据时,会发生 drop 事件。
在上头的例证中,ondrop 属性调用了叁个函数,drop(event):

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

代码解释:

调用 preventDefault() 来幸免浏览器对数码的暗中同意管理(drop
事件的暗中同意行为是以链接格局打开)
通过 dataTransfer.getData(“Text”) 方法得到被拖的多寡。该措施将赶回在
setData() 方法中安装为同一等级次序的别样数据。
被拖数据是被拖成分的 id (“drag1”)
把被拖成分追加到放置元素(指标成分)中

来来往往拖动:

若要在五个地点来回拖动,只需将上边代码稍作修改就行了.
将body中的代码改成:

<body>  
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">  
    <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)"  width="300px" height="180px" /></div>  
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>  
</body>  

下一场在style样式中加上#div2就可以了:

<style type="text/css">  
        #div1,#div2{width:360px;height:220px;padding:20px;border:1px solid black;}  
    </style>  

诸如此比就能够达成来回拖放了。

如上就是本文的全部内容,希望对大家的上学抱有支持,也希望咱们多多帮助帮客之家。

拖放
拖放是一种常见的性状,即抓取对象今后拖到另四个职位。 在 HTML5中,拖放是专门的工作的一部分…

单次拖放demo

的拖放(实例:八个div之间拖放图片),
重视解释: 首先,为了使成分(如本图片)可拖动,把 draggable 属性设置为
true : dataTransf…

效果:

图片 4

admin

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注