去掉effectAllowed属性

dropEffect属性只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖放元素的哪种dropEffect，effectAllowed属性可能的值如下：

（1）uninitialized：没有该被拖动元素放置行为。

（2）none：被拖动的元素不能有任何行为。

（3）copy：只允许值为“copy”的dropEffect。

（4）link：只允许值为“link”的dropEffect。

（5）move：只允许值为“move”的dropEffect。

（6）copyLink：允许值为“copy”和“link”的dropEffect。

（7）copyMove：允许值为“copy”和“link”的dropEffect。

（8）linkMove：允许值为“link”和“move”的dropEffect。

（9）all：允许任意dropEffect。

必须在ondraggstart事件处理程序中设置effectAllowed属性。

假设想允许用户把文本框中的文本拖放到一个＜div＞元素中。首先，必须将dropEffect和effectAllowed设置为“move”。但是，由于＜div＞元素的放置事件的默认行为是什么也不做，所以文本不可能自动移动。重写这个默认行为，就能从文本框中移走文本，然后就可以自己编写代码将文本插入＜div＞中，这样整个拖放操作就完成了。如果将dropEffect和effectAllowed的值设置为“copy”，那就不会自动移走文本框中的文本。(www.xing528.com)

下面是一个综合实例的完整代码和运行结果，本实例的功能是拖放链接对象到指定区域并打开链接，源代码参见“chap6.4.2.1.html”。

其运行结果如图6.8所示。

在默认情况下，图像、链接和文本是可以拖动的，也就是说，不用额外编写代码，用户就可以拖动它们。文本只有在被选中的情况下才能被拖动，而图像和链接在任何时候都可以拖动。

让其他元素可以被拖动也是可能的。HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以被拖动。图像和链接的draggable属性自动被设置成了true，而其他元素这个属性的默认值都是false。要想让其他元素可被拖动，或者让图像或链接不能被拖动，都可以设置这个属性。例如：

图6.8　拖放文字对象实例

<!--让这个图像不可以拖动-->

<imgsrc="smile.gif"draggable="false"alt+"Smileyface">

<!--让这个元素可以拖动-->

<divdraggable="true">...</div>

支持draggable属性的浏览器有IE10＋、Firefox4＋、Safari5＋和Chrome。Opera11.5以及之前的版本都不支持HTML5的拖放功能。另外，为了让Firefox支持可拖动属性，还必须添加一个ondragstart事件处理程序，并在dataTransfer对象中保存一些信息。