H5拖放事件 "Uncaught TypeError: Cannot read property 'setData' of undefined"

今天遇到一个很有趣的问题，到现在还没有搞明白，不过可以绕过这个问题去处理拖放事件，在这里谈一下这个错误

(该文章后面有JQ插件开发的一些问题，有些地方理解可能不到位，但是都是可以解决问题的)

===============================拖放事件部分==============================================

错误提示：Uncaught TypeError: Cannot read property 'setData' of undefined

这个错误提示的出现，是我尝试做一个拖放的插件的时候产生的，部分源代码是这样的:

文件:drag.js

$('.drag').bind('dragstart',function(event){
								
		event.dataTransfer.setData('Text' , event.target.className);

 		});

以上是被拖动的元素所绑定的一个事件(我另外写到了一个JS文件中)，当我拖动时就出现了上面的错误提示；

然而，当我将这个函数直接放到html页面里面，同样的代码浏览器是没有报错的

<div class="drag" draggable="true" οndragstart="drag(event)">B</div>

function drag(e)
{

e.dataTransfer.setData('Text',e.target.className);

}

为此我查询了一些资料，并没有找到出现这种情况的原因，不过发现另外一个“”剪贴板“”功能

window.clipboardData.setData('Text',data);<span style="color:#ff0000;"><span style="color:#ff0000;">//（只有IE能识别，请勿使用）可以代替e.dataTransfer.setData('Text',e.target.className);</span>

并且将其写到我的drag.js文件中也是可以正常执行，拖动元素。

后来实在找不出原因了，直接就定一个全局变量来存储事件触发源，只是我还是希望搞懂关于dataTransfer.setData这个内容

附上这个小插件的代码:(暂未封装，知道原理即可):

用法：

在任意元素中添加 类 .drag  则该元素被设置为可拖动对象

添加类. drop 则该元素设置为可放置对象

元素可同时拥有这两个类名

$(function(){
	 var data;
	$('.drag').attr('draggable','true');//设置被拖动元素为可拖动

 //被拖动时的动作

$('.drag').bind('dragstart',function(event){data=event.target;//将触发事件的对象保存起来 });

//拖动结束

$('.drop').bind('dragover',function(event){ event.preventDefault();//允许放置 });

//放置动作
				$('.drop').bind('drop',function(event){
							
							event.preventDefault();//允许被放置（该方法是阻止默认处理方式，默认情况是不允许放置）
							
							 $(event.target).append($(data));//把被拖动的元素添加到目标元素里面
 
							 });
		   
		   
		   
		   
		   });

===============================JQ插件开发内容==============================================

/*附上基础拓展JQ方法，也就是类级别和对象级别插件的开发方式*/

//类级别JQ插件(全局函数),用法：$.max(a,b);$.min(a,b)    这样写就类似于$.ajax的用法

$.extend({

max:function(a,b){
if(a>b)
alert(a);
else
alert(b);
},
min:function(a,b){

if(a>b)
alert(b);
else
alert(a);
}

});

//类级别,自定义命名空间,由于我们平时用到的各种插件，也许会和JQ本身默认命名空间的函数名有冲突，所以最好就是能定义一个自己的命名空间，来减少这个错误的几率(以下定义了一个叫my的命名空间)   用法：$.my.max();    而默认的命名空间是  $.fn.xxx();这种形式创建的函数属于“”对象级别“”插件  可以通过选择器选择对象然后直接调用

如：$('id').xxx();

$.my={
max:function()
{
alert("1");

},
min:function()
{
alert("2");

}
};

//对象级别的插件,用法$('#haha').getid(event);

//或者  $.fn.getid(event);  $.fn所包含的方法和属性都可以被JQ实例调用

$.fn.getid=function(e){

alert(e.target.id);
};

$.fn.extend({
xxx:function(){},
yyy:function(){}
});

如何让自定义命名空间的函数能够被JQ实例直接调用 ，也就是$('#id').myspace.xxx()而不单单是通过是$.myspace.xxx();

先附上代码

//类级别,自定义命名空间
/* var space;//声明一个命名空间

//让空间绑定my变量
var my=$.myspace={
min:function()
{
alert("min");}


}

//在fn空间下定义一个属性。这个属性绑定了自定义的空间
$.fn.space=my;
*///调用方式$('#id').space.min();

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。

所以使用方法为

$('#id').space.min();