html5中drag//drop拖曳效果的用法

分手后的思念是犯贱 2022-07-13 03:28 93阅读 0赞

[鑫空间讲解][Link 1]

[讲义][Link 2]

缺乏对clearData() dropEffect() effectAllowed()的理解

eg1:

把图像放在边框中

<!DOCTYPE HTML>  
<html>  
<head>  
<meta charset="utf-8">  
<style type="text/css">  
\#div1 \{width:198px; height:66px;padding:10px;border:2px solid \#aaaaaa;\}  
</style>  
<script type="text/javascript">  
function allowDrop(ev)  
\{  
ev.preventDefault();  
\}  
  
  
function drag(ev)  
\{  
ev.dataTransfer.setData("img",ev.target.id);  
\}  
  
  
function drop(ev)  
\{  
ev.preventDefault();  
var data=ev.dataTransfer.getData("img");  
ev.target.appendChild(document.getElementById(data));  
\}  
</script>  
</head>  
<body>  
  
  
<p>请把 W3School 的图片拖放到矩形中：</p>  
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>  
<br/>  
<img id="drag1" width="100px" height="50px" src="drag.jpg" draggable="true" οndragstart="drag(event)"/>  
</body>  
</html>

eg2:图片在两个边框之中来回拖放

<!DOCTYPE HTML>  
<html>  
<head>  
<style type="text/css">  
\#div1, \#div2  
\{float:left; width:198px; height:66px; 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);  
\}  
  
  
function drop(ev)  
\{  
ev.preventDefault();  
var data=ev.dataTransfer.getData("Text");  
ev.target.appendChild(document.getElementById(data));  
\}  
</script>  
</head>  
<body>  
  
  
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)">  
  <img src="/i/eg\_dragdrop\_w3school.gif" draggable="true" οndragstart="drag(event)" id="drag1" />  
</div>  
<div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>  
  
  
</body>  
</html>

[Link 1]: http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B%BD%E4%B8%8E%E6%8B%96%E6%94%BE%E7%AE%80%E4%BB%8B/
[Link 2]: http://www.hbcms.com/main/dhtml/objects/obj_datatransfer.html