您的位置：首页 > Web前端 > HTML5

HTML5图片拖拽

2015-08-12 15:42 561 查看

<!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); //设置被拖拽控件的ID的别名是“Text”

}

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text"); //取得名为‘Text’的控件

ev.target.appendChild(document.getElementById(data)); //把控件添加到目标控件内

}

</script>

</head>

<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

<img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" /> //设置img为可拖拽属性 draggable="true" ondragstart="drag(event)"

</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>

</html>

拖拽前：

拖拽后：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航