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 = 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 = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
