Html5实现如何在两个div元素之间拖放图像,方法完结表格拖拽实例

By admin in 4858美高梅 on 2019年4月12日

上1回学习了html伍的drag和drop方法,传送门  就融洽写了个例子加深本身对drag和drop的知晓。可是一开始不是很粗大略,遭逢了不少题材。幸而网络万能的,什么都能查到,总算完成了。

HTML伍 拖放功能完结代码,html五拖放完成代码

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

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>   

二、设置成分为可拖放
 
第1,为了使成分可拖动,把 draggable 属性设置为 true :<img
draggable=”true”>
 
三、拖动什么 – 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 (“drag一”)。
 
4、放到哪儿 – ondragover  
Html5实现如何在两个div元素之间拖放图像,方法完结表格拖拽实例。ondragover
事件规定在何方放置被拖动的数据。暗许地,不可能将数据/成分放置到别的因素中。要是急需设置允许放置,大家不可能不遏止对成分的暗中同意处理格局。这要透过调用
ondragover 事件的 event.preventDefault()
方法:event.preventDefault()  
伍、进行停放 – ondrop
 
 当放置被拖数据时,会产生 drop 事件。在地方的事例中,ondrop
属性调用了2个函数,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
(“drag一”)。把被拖成分追加到放置元素(指标元素)中。

上述正是本文的全体内容,希望对我们的就学抱有帮忙,也盼望大家多多协理帮客之家。

拖放作用完结代码,html5拖放完成代码
在HTML5中,拖放是专业的一部分,任何因素都能够拖放,具体内容如下 壹、拖放
XML/HTML Code 复制内…

HTML5 拖放(Drag 和 Drop),html5drag

拖放(Drag
和 drop)是 HTML伍 标准的组成都部队分。


4858美高梅 1

 

将w三cschool图标拖动到矩形框中。


点评:调用 preventDefault() 来幸免浏览器对数据的暗中同意处理(drop
事件的私下认可行为是以链接格局打开)通过 dataTransfer.getData(Text)
方法赢得被拖的数码,感兴趣的对象能够参见下哈

 

拖放

拖放是壹种常见的性状,即抓取对象现在拖到另三个职位。

在 HTML5 中,拖放是正式的壹有个别,任何因素都能够拖放。


原来意义

表明和详解都在代码里。

浏览器帮助

4858美高梅 24858美高梅 34858美高梅 44858美高梅 54858美高梅 6

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 帮衬拖动。

注意:Safari 伍.一.二不援救拖动.


4858美高梅 7

html和css代码如下:

4858美高梅,HTML伍 拖放实例

上面包车型地铁例证是三个大致的拖放实例:

拖拽之后效果

4858美高梅 84858美高梅 9

实例

<!DOCTYPE HTML>
<html>
<head>
<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>
<p id=”p1″ ondrop=”drop(event)”
ondragover=”allowDrop(event)”></p>
<img id=”drag1″ src=”img_logo.gif” draggable=”true”
ondragstart=”drag(event)” width=”336″ height=”69″>
</body>
</html>

品尝一下 »

它看上去或许某个复杂,可是我们能够分别商量拖放事件的分裂部分。


4858美高梅 10

<table>
    <thead>
        <tr>
            <th>年龄</th>
            <th>姓名</th>
            <th>面试时间</th>
            <th>面试类型</th>
            <th>面试官</th>
            <th>结论</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>33</td>
            <td >章三</td>
            <td>2018-04-04</td>
            <td>交互设计师</td>
            <td>琪琪</td>
            <td>待查</td>
        </tr>
        <tr>
            <td>20</td>
            <td >李四</td>
            <td>2018-03-07</td>
            <td>前端工程师</td>
            <td>悠悠</td>
            <td></td>
        </tr>
        <tr>
            <td>24</td>
            <td >王五</td>
            <td>2018-04-10</td>
            <td>java工程师</td>
            <td>懒懒</td>
            <td></td>
        </tr>
        <tr>
            <td>18</td>
            <td >六六</td>
            <td>2018-03-05</td>
            <td>UI设计师</td>
            <td>张施</td>
            <td>通过</td>
        </tr>
        <tr>
            <td>21</td>
            <td >刘灿</td>
            <td>2018-04-14</td>
            <td>交互设计师</td>
            <td>琪琪</td>
            <td>通过</td>
        </tr>
        <tr>
            <td>28</td>
            <td >李江</td>
            <td>2018-03-27</td>
            <td>前端工程师</td>
            <td>悠悠</td>
            <td></td>
        </tr>
        <tr>
            <td>22</td>
            <td >王雷</td>
            <td>2018-03-30</td>
            <td>java工程师</td>
            <td>懒懒</td>
            <td></td>
        </tr>
        <tr>
            <td>25</td>
            <td >刘哲</td>
            <td>2018-03-16</td>
            <td>UI设计师</td>
            <td>张施</td>
            <td>通过</td>
        </tr>
    </tbody>
</table>

设置成分为可拖放

先是,为了使成分可拖动,把 draggable 属性设置为 true :

<img draggable=”true”>


代码如下

View Code

拖动什么 – ondragstart 和 setData()

然后,规定当成分被拖动时,会产生哪些。

在地点的事例中,ondragstart
属性调用了2个函数,drag(event),它规定了被拖动的数量。

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

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

在那个事例中,数据类型是 “Text”,值是可拖动成分的 id (“drag壹”)。


代码如下:

javascript代码如下:

内置哪里 – ondragover

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

暗中同意地,不能将数据/成分放置到其余因素中。如若急需设置允许放置,大家务必遏止对成分的暗许处理方式。

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

event.preventDefault()


[code]
<!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>
</head>
<body>
<img src=”/i/w3school_logo_black.gif” draggable=”true”
ondragstart=”drag(event)” id=”drag1″ />
<div id=”div1″ ondrop=”drop(event)”
ondragover=”allowDrop(event)”>
</div>
<div id=”div2″ ondrop=”drop(event)”
ondragover=”allowDrop(event)”></div>
</body>
</html>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

$('thead th').attr('draggable',true); // 将表格th声明为可拖拽

    $('thead th').on('dragstart',function(ev){
        // 被拖数据的数据类型和值
        ev.originalEvent.dataTransfer.setData("Text", ev.currentTarget.cellIndex);
    })

    $('thead th').on('dragover',function(ev){
        // 阻止默认行为
        ev.preventDefault();
    })

    $('thead th').on('drop',function(ev){
        // 阻止默认行为
        ev.preventDefault();
        // 获取被拖的数据的索引
        var id = ev.originalEvent.dataTransfer.getData("Text");
        // 当前要放下的索引
        var Id = this.cellIndex;
        // 存储点击的this
        var that = this;
        // 遍历th
        $('thead th').each(function(){
            // 获取遍历的每一个th,这个this和点击的this不一样
            var _this = this;
            // 当遍历的每一个th的索引和被拖拽的索引一致时,重构
            if(_this.cellIndex == id){
                if(id > Id){
                    that.before(_this);
                }else{
                    that.after(_this);
                }
            }
        })
        // 遍历tbody的tr
        $('tbody tr').each(function(i){
            // 提供一个容器,分别用来存储原位置的一列和被拖拽的一列
            var box1 = "";
            var box2 = "";
            // 遍历tr中的td
            $(this).children('td').each(function(){
                // 存储原位置的一列
                if(this.cellIndex == Id){
                    box1 = this;
                }
                // 存储被拖拽的一列
                if(this.cellIndex == id){
                    box2 = this;
                }
            })
            if(id > Id){
                box2.after(box1);
            }else{
                box2.before(box1);
            }
        })
    })

进行停放 – ondrop

当放置被拖数据时,会发出 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 (“drag一”)
  • 把被拖成分追加到放置成分(指标成分)中

拖放(Drag 和 Drop),html五drag 拖放(Drag
和 drop)是 HTML伍 标准的组成都部队分。 将w三cschool图标拖动到矩形框中。 拖放
拖放是一种普遍的表征…

[/code]
它看上去大概有点复杂,不过我们能够分级研商拖放事件的例外部分。

欣逢的难点:

设置成分为可拖放

一 setData获取不到,报错。
由来:因为是参数ev是被jquery封装的,而不是作者原生的,要获得就按
ev.original伊夫nt.dataTransfer.setData()。

第一,为了使成分可拖动,把 draggable 属性设置为 true :

二不是具备的轩然大波措施都要有ev.preventDefault();那样也会堵住我友好写的点子。

代码如下:

三在遍历tbody的td时,未有想到怎么遵照顺序放置拖拽和原岗位,同事解答之后,才知晓要求二个容器去存款和储蓄。

<img draggable=”true” />

 

拖动什么 – ondragstart 和 setData()

世家对这些实例要是有毛病要么有更加好的法门,请评论或私信,1起发展。

然后,规定当成分被拖动时,会产生什么。

 

在地点的事例中,ondragstart
属性调用了2个函数,drag(event),它规定了被拖动的数额。

参考资料:

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

代码如下:

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

在那么些例子中,数据类型是 “Text”,值是可拖动成分的 id (“drag一”)。

放置哪里 – ondragover

ondragover 事件规定在哪儿放置被拖动的数额。

暗中认可地,不能将数据/成分放置到别的因素中。若是急需设置允许放置,大家不能够不遏止对成分的暗中同意处理形式。

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

代码如下:

event.preventDefault()

进展停放 – ondrop

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

在地点的事例中,ondrop 属性调用了1个函数,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
(“drag一”)把被拖成分追加到放置成分(指标成分)中

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有