html5 拖拽

 

*{margin: 0 auto;}
    	div{border: 1px solid black;height: 200px;width: 800px;margin-top: 20px;}
    	span{background: red;width: 50px;height: 50px;margin: 20px;display: inline-block;}
    	

        <div class="droptarget">
        <!-- 将元素设为允许拖拽 -->
		<span draggable="true">1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
	</div>
	<div class="droptarget"></div>

 

        $(function(){
		//将元素设为允许拖拽
		$("span").attr("draggable",true);
	}); 
	
	var t;
	/* 拖动时触发*/
	document.ondragstart = function(event) {
	    /* dataTransfer.setData() 方法设置被拖数据的数据类型和值，
                prop("outerHTML")：获取包括当前元素在内的全部元素
           */
	    event.dataTransfer.setData("text", $(event.target).prop("outerHTML"));
	    //存储源节点，方便后面删除
	    t=event.target;
	};
	/* 规定在何处放置被拖动的数据。*/
	document.ondragover = function(event) {
	    /* 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式 */
	    event.preventDefault();
	};
	/* 放置被拖数据 */
	document.ondrop = function(event) {
		
	    /* 避免浏览器对数据的默认处理 */
	    event.preventDefault();
	    if(event.target.className=="droptarget"){
		
		/* 获得被拖的数据 */
	        var data = event.dataTransfer.getData("text");
		/* 把被拖元素追加到放置元素 */
	        $(event.target).append(data);
		/* 删除源节点 */
	        t.remove();
	    }
	};