大阳城·(中国区)官方网站入口-Macau App Station

施曳内容1

施曳内容2

拖曳内容3

拖曳内客4

上述代码中，第33~40行代码定义了3个div盒子作为目标对象，元素id值分别是divl、div2和div3。在div1盒子中，放置了4个p元素作为源对象，这些元素的id值分别为p1、p2、p3和p4。

(2)保存代码，在浏览器中进行测试，效果如图。

(3)在第(1)步第40行代码后，编写如下代码，设置源对象的拖曳效果：

上述代码中，event.target用来获取触发事件的子盒子。由于源对象是可以在目标对象中任意来回拖动的，所以使用document作为父盒子，在这里将事件对象委托给document元素。第3-7行代码用于实现源对象被拖动时的数据存储。其中，第6行代码在拖曳操作时使用dataTransfer对象存储数据，该对象可以保存一项或多项数据，支持多种数据型(如URL、text/html类型)。dataTransfer对象的setDataO方法可以为一个给定的类型设置数据，传递 event.target.id 用于记录当前被拖曳的源对象的id。

(4)在浏览器中刷新浏览器页面，并打开控制台，查看源对象的事件过程，页面效果如图。

当拖动id为p4的元素“拖曳内容4”时，控制台中会打印出该元素的id值，以及源对象开始被拖动、被拖动过程中和被拖动结束时的一系列监听。读者可以根据控制台打印的数据来观察监听过程。

(5)继续编写如下代码，设置目标对象的释放效果：

//当源对象进入目标对象时
document.ondragenter=function (event){
  console.log（'目标对象被源对象拖动着进入'）；
  console.log (event.target);
};
//当源对象悬停在目标对象上方时触发
document.ondragover=function (event) {
  console.1og（'源对象悬停在目标对象上方'）：
  return false;
};
// 当源对象离开目标对象时
docuwlnt.ondragleave=function() {
console.log('离开了')；
};
//当源对象在目标对象上方释放鼠标时
document.ondrop=function (event){
  console.1og（'上方释放/松手'）；
  var id = event.dataTransfer.getData('text/html');
  event.target.appendChild(document.getElementById(id));
};

上述代码定义了应用于目标对象的一系列监听事件。第16~20行代码实现了当源对象在目标对象上释放(松开)鼠标时，将源对象放入目标对象的效果。其中，第18行代码使用dataTransfer对象的getData()方法，获取之前使用 setDataO方法存入的id值;第19行代码使用document.getElementByld)获取id值对应的元素，并使用appendChild()方法将其追加到event.target 目标对象中。

(6)在浏览器中刷新，然后进行拖曳操作，查看源对象进入目标对象的事件过程，页面效果如图。