[学习笔记] HTML5+CSS3-充实笔记0625 [推广有奖]

51关注
7粉丝

已卖：1067份资源

大师

26%

还不是VIP/贵宾

威望: 1 级
论坛币: 83583 个
通用积分: 13687.5722
学术水平: 673 点
热心指数: 828 点
信用等级: 739 点
经验: 425919 点
帖子: 17345
精华: 0
在线时间: 3605 小时
注册时间: 2016-7-9
最后登录: 2025-12-26

楼主

HappyAndy_Lo 发表于 2019-6-25 14:52:30 |AI写论文

是否 +2 论坛币

k人参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

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;
         width: 220px;
      }
   </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>