Html5完成怎样在两个div元素之间拖放图象

日期:2020-10-12 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

本来实际效果

拖拽以后实际效果

编码以下


拷贝编码
编码以下:

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

[/code]
它看上去或许一些繁杂,但是大家能够各自科学研究拖放恶性事件的不一样一部分。

设定元素为可拖放

最先,以便使元素可拖拽,把 draggable 特性设定为 true :

拷贝编码
编码以下:

<img draggable="true" />

拖拽甚么 - ondragstart 和 setData()

随后,要求当元素被拖拽时,会产生甚么。

在上面的事例中,ondragstart 特性启用了1个涵数,drag(event),它要求了被拖拽的数据信息。

dataTransfer.setData() 方式设定被拖数据信息的数据信息种类和值:

拷贝编码
编码以下:

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

在这个事例中,数据信息种类是 "Text",值是可拖拽元素的 id ("drag1")。

放到何处 - 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 ("drag1")把被拖元素追加到置放元素(总体目标元素)中