如何在html5中并排放入两张图片,HTML_Html5实现如何在两个div元素之间拖放图像，原本效果 拖拽之后效果 - phpStudy...

Html5实现如何在两个div元素之间拖放图像

原本效果

拖拽之后效果

代码如下

复制代码代码如下:

[code]

#div1, #div2

{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}

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

}

[/code]

它看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

复制代码代码如下:

拖动什么 -