HTML5+CSS3-充实笔记0625

HappyAndy_Lo

186

收藏 2019-06-25

dataTransfer对象
是事件对象的一个属性，所以只能在事件处理程序中访问

dropEffect属性（拖放操作的视觉效果）
effectAllowed属性（指定当元素被拖放时所允许的视觉效果）
type属性（存入数据的种类，字符串的伪数组）

clearData方法
setData方法
getData方法
setDragImage方法

设定拖放时的视觉效果（设置属性即可）
自定义拖放图标

var src = document.getElementById("img01");
src.ondragstart = function(e){

var dragIcon = document.createElement('img');
dragIcon.src = 'img/dragimg.png';
dragIcon.width = 100;
var dt = e.dataTransfer;
dt.setDragImage(dragIcon, -10, -10);

};

完整示例：
<!DOCTYPE html>
<html>
<head>
   <title>8.1.1.html</title>
   <meta charset="utf-8" />
   <style type="text/css">
      #div1, #div2, #div3, #div4
      {
         border:3px dashed #ccc;
         float: left;
         margin: 10px;
         min-height: 100px;
         padding: 10px;
         ;
      }
   </style>
   <script type="text/javascript">
      function allowDrop(e){
         e.preventDefault();
      }
      function drag(e){
         e.dataTransfer.setData("Text", e.target.id);
         var dragIcon = document.createElement('img');
         dragIcon.src = 'img/dragimg.png';
         var dt = e.dataTransfer;
         dt.setDragImage(dragIcon, -10,-10);
      }

      function drop(ev){
         ev.preventDefault();
         var data = ev.dataTransfer.getData("Text");
         ev.target.appendChild(document.getElmentById(data));

      }

   </script>
</head>
<body>
   <div id="div1">
      <h2>请选择颜色</h2>
      <img src="img/bg_01.png" draggable="true" id="drag1" />
      <img src="img/bg_02.png" draggable="true" id="drag2" />
      <img src="img/bg_03.png" draggable="true" id="drag3" />
   </div>
   <div id="div2">
      <h2>红色</h2>
   </div>
   <div id="div3">
      <h2>绿色</h2>
   </div>
      <div id="div4">
      <h2>黄色</h2>
   </div>

</body>
</html>