HTML5拖拽实现的小例子

html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>来回拖放title>
    <style>
        #div1{
            width: 400px;
            height: 200px;
            border: 1px solid black;
            float: left;
        }
        #div2{
            width: 400px;
            height: 200px;
            border: 1px solid black;
            float: left;
        }
    style>
head>
<body>
<script type="text/javascript">
    function AllowDrag(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>
<div id="div1" οndrοp="drop(event)" οndragοver="AllowDrag(event)">div>
<div id="div2" οndrοp="drop(event)" οndragοver="AllowDrag(event)">div>
<p id="drag1" draggable="true" οndragstart="drag(event)">我是将要拖拽的东西p>

body>
html>

你可能感兴趣的:(WEB前端)