标签：
1. 将想要拖放的对象元素的draggable属性设为true（draggable ＝ “true”）。这样才能将元素进行拖放。注意：img元素和a元素（必须指定href）默认允许拖放。
2.编写与拖放有关的事件处理代码。
有关的事件?：
dragstart：网页元素开始拖动时触发。
drag：被拖动的元素在拖动过程中持续触发。dragenter：被拖动的元素进入目标元素时触发，应在目标元素监听该事件。dragleave：被拖 动的元素离开目标元素时触发，应在目标元素监听该事件。dragover：被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。drap： 被拖动元素或从文件系统选中的文件，拖放落下时触发。dragend：网页元素拖动结束时触发。以上这些事件都可以指定回调函数。下面就是一个回调函数的 例子
拖放代码：
实现init()函数：
function init()
｛ var source = document.getElementByIdx_x("dragme"); var dest = document.getElementByIdx_x("text");｝
拖放开始：
?source.addEventListener("dragstart", function(ev)
{ // 向dataTransfer对象追加数据 var dt = ev.dataTransfer; dt.effectAllowed = ‘all‘; //(2) 拖动元素为dt.setData("text/plain", this.id); dt.setData("text/plain", "我爱你中国"); }, false);
dragend：拖放结束：
? dest.addEventListener("dragend", function(ev)
{ //不执行默认处理（拒绝被拖放） ev.preventDefault(); }, false);
drop:被拖放：
dest.addEventListener("drop", function(ev) {
// 从DataTransfer对象那里取得数据 var dt = ev.dataTransfer; var text = dt.getData("text/plain"); dest.textContent += text; //(5) 不执行默认处理（拒绝被拖放） ev.preventDefault(); //停止事件传播 ev.stopPropagation(); }, false); }
?设置页面属性，不执行默认处理（拒绝被拖放）：
document.ondragover = function(e){
e.preventDefault();}; document.ondrop = function(e){ e.preventDefault();}
?开始拖动（dragstart事件）：
把拖动的数据存入DataTransfer(setData()方法)。DataTransfer对象专门用来存储拖放时要携带的数据，它可以被设置为拖放事件对象的dataTransfer属性。
setData有两个参数：第一个参数为携带数据的数据种类的字符串，只能填入类似”text/plain” 或”text/html”的表示MIME类型的文字，不能填入其他文字。第二个参数为要携带的数据
事件对象.preventDefault()：
?必须在dragend和dragover事件内调用“事件对象.preventDefault()”方法。因为在默认情况下，拖放的目标元素是不允许接受元素的，为了把元素拖放到其中，必须把默认处理给关掉
目标元素使用getData()方法：
目标元素接受到被拖放的元素后，执行getData()方法从DataTransfer 那里获得数据。
getData()方法的参数为setData()方法中指定的数据类型
注意??
要实现拖放过程，还必须在目标元素的drop事件中关闭默认处理（拒绝被拖放），否则目标元素不能接受被拖放的元素。
要实现拖放过程，还必须设定整个页面为不执行默认处理（拒绝被拖放），否则拖放处理也不能被实现。因为页面是先于其他元素接受拖放的，如果页面拒绝拖放， 那么其他页面上的元素也不能接受拖放。因为这个示例中的数据种类使用了”text.plain”这个MIME类型，也可以从其他使用同样MIME类型的应 用程序中把该类型的数据拖放到目标元素中。
目前支持拖动处理的MIME的类型：text/plain: 文本文字text/html: HTML 文字text/xml: XML文字text/uri-list: URL列表，每个URL为一行
dataTransfer对象：
拖动过程中，回调函数接受的事件参数，有一个dataTransfer属性。它指向一个对象，包含了与拖动相关的各种信息。
draggableElement.addEventListener(‘dragstart‘, function(event) { event.dataTransfer.setData(‘text‘, ‘Hello World!‘);});上面代码在拖动开始时，在dataTransfer对象上储存一条文本信息，内容为“Hello World”。当拖放结束时，可以用getData方法取出这条信息。
?dataTransfer对象的属性：
dropEffect：拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为copy、move、link和none。
effectAllowed：指定所允许的操作，可能的值为copy、move、link、copyLink、copyMove、linkMove、 all、none和uninitialized（默认值，等同于all，即允许一切操作）。files：包含一个FileList对象，表示拖放所涉及的 文件，主要用于处理从文件系统拖入浏览器的文件。types：储存在DataTransfer对象的数据的类型。dataTransfer对象的方 法：setData(format, data)：在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。 getData(format)：从dataTransfer对象取出数据。clearData(format)：清除dataTransfer对象所储 存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。setDragImage(imgElement, x, y)：指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素，而不是指向图像 的路径，参数x和y表示图像相对于鼠标的位置。
?getData,setData方法：
??getData,setData,这两个方法：
1. setData方法在拖放开始时向dataTransfer对象中存入数据，它用types属性来指定数据的MIME 类型。 2. getData方法在拖动结束时读取dataTransfer对象中的数据clearData方法可以用来清除DataTransfer对象内的数据。如果在上面的代码getData() 方法前先加上”dt.clearData();”,那么目标元素内就不会放入任何数据了
标签：
原文地址：http://www.cnblogs.com/zjqqqq/p/5060960.html
