本例实现一个拖放操作。在该实例中，有一个显示“拖放”文字的div元素，可以把它拖放到位于它下部的div元素中，每次被拖放时，下部的div元素中会追加一次“浙江商业职业技术学院欢迎你”文字（完整代码参见“chap6.3.2.1.html”）。

实现操作的具体步骤如下：

（1）将想要拖放的对象元素的draggable属性设为true，同时在＜body＞标签中增加onload＝“inti（）”事件。另外，为了让这个实例在支持拖放API的浏览器中都能正确运行，需要指定“-webkit-user-drag：element”这种webkit特有的css属性。代码如下：

<bodyonload="init()">

<h1>拖放欢迎语</h1>

<!--把draggable属性设为true-->

<divid="dragme"draggable="true"style="width:200px;border:1pxsolidgray;">

请拖放

</div>

<divid="text"style="width:200px;height:200px;border:1pxsolidgray;"></div>

</body>

（2）在init（）函数中获取div的id值：(www.xing528.com)

varsource=document.getElementById("dragme");

vardest=document.getElementById("text");

（3）Dragstart事件开始实现拖动，把要拖动的数据存入datatransfer对象。Datatransfer对象专门用来存放拖动时要携带的数据。它可以被设置为拖动事件对象的dataTransfer属性。最后通过setData（）方法实现拖放，该方法的第一个参数为携带数据的各类字符串，第二个参数为要携带的数据。第一个参数只能填入类似“text／plain”或者“text／html”表示的MIME类型的文字。代码如下：

（4）针对拖放的目标元素，必须在dragend或dragover事件内调用event.preventDefault（）方法。因为在默认情况下，拖放的目标元素是不接受元素的，为了把元素拖放到其中，必须把默认处理关掉。代码如下：

（5）要实现拖放处理，还必须在目标元素的drop事件中进行默认处理（拒绝被拖动），否则目标元素不接受被拖放的元素。目标元素接受被拖动的元素后，执行getData（）方法，从datatransfer那里获得数据。getData（）的参数为set-Data（）方法中指定的数据类，在本例中为”text／plain”（文本文字）。代码如下：

（6）设置整个页面为不执行默认处理（拒绝被拖放），否则拖放处理也不能实现。因为页面是先于其他元素接受拖放的，如果页面拒绝拖放，则页面上的其他元素就不能接受拖放了。代码如下：

//设置页面属性，不执行默认处理（拒绝被拖放）

document.ondragover=function(e){e.preventDefault();};

document.ondrop=function(e){e.preventDefault();};

说明：支持拖放的MIME类型有：“text／plain”“text／html”“text／xml”和“text／uri-list”。

本例的运行结果如图6.7所示。

图6.7　拖放文字实例