首页 > 代码库 > HTML5 元素拖动
HTML5 元素拖动
1、拖动元素img的相关设置：
设置元素可以拖动属性
draggable="true"
设置元素被拖动时触发的事件
ondragstart="drag(event)"
图片元素可拖动的完整代码
HTML：
<img id="drag1" src="images/ycbt1.JPG" draggable="true" ondragstart="drag(event)" />
Javascript：
<script>function drag(event){ event.dataTransfer.setDate("Text",ev.target.id);}</script>
2、设置允许拖动对象放置的元素div：
允许拖动图片放置在div内，阻止对事件的默认处理方式，在div内添加属性
ondragover="allowDrop(event)"
放置时触发的事件
ondrop="drop(event)"
div元素可放置拖动img的完整代码
HTML：
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="width:600px; height:100px; border:1px solid black"></div>
Javascript:
<script>function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id);}function allowDrop(ev){ ev.preventDefault();}function drop(ev){ ev.preventDefault(); var data = http://www.mamicode.com/ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data));}</script>
3、把两张图片img拖动到一个div中，并排放置完整代码
HTML：
<body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img class="img" id="drag1" src="images/ycbt1.JPG" draggable="true" ondragstart="drag(event)"/> <img class="img" id="drag2" src="images/ycbt2.JPG" draggable="true" ondragstart="drag(event)"/></body>
CSS：
<style type="text/css">#div1 {width:600px; height:100px; border:1px solid black; padding:10px}.img {width:60px; height:90px; margin:10px; float:left}</style>
Javascript:
<script type="text/javascript">function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id);}function allowDrop(ev){ ev.preventDefault();}function drop(ev){ ev.preventDefault(); var data = http://www.mamicode.com/ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data));}</script>
HTML5 元素拖动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。