Javascript拖拽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>利用datatransfer实现文本预览</title>
		<style>
			
			
			.result{
				width: 200px;
				height: 200px;
				background: red;
			}
		</style>
	</head>
	<body style="margin: 100px;">
	
		
		<div class="result">
			
		</div>
		<div id="view">
			
		</div>
		
		
		
		<script>
			var oRes = document.getElementsByTagName("div")[0]
			var oView = document.getElementById("view")
			
			oRes.ondragenter = function(){
				this.innerHTML = "可以放手"
			}
			
			oRes.ondragover = function(e){
				e.preventDefault()
			}
			
			oRes.ondrop = function(e){
				e.preventDefault()
//				console.log(e.dataTransfer)
				var fs = e.dataTransfer.files[0]
				var reader = new FileReader()
				reader.readAsText(fs)
				reader.onload = function(){
//					console.log(this.result)
					oView.innerHTML = this.result
				}
			}
			
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>datatransfer中的setData()和getData()</title>
		<style>
			.drag{
				width: 100px;
				height: 100px;
				border: 1px solid black;
				margin-bottom: 100px;
			}
			
			.result{
				width: 200px;
				height: 200px;
				background: red;
			}
		</style>
	</head>
	<body style="margin: 100px;">
		<div class="drag" draggable="true">
			
		</div>
		
		<div class="result">
			
		</div>
		
		
		
		<script>
			var oDrag = document.getElementsByTagName("div")[0]
			var oRes = document.getElementsByTagName("div")[1]
			
			oDrag.ondragstart = function(e){
				e.dataTransfer.setData("title","今日头条")
			}
			
			oRes.ondragenter = function(){
				this.innerHTML = "可以释放"
			}
			
			oRes.ondragover = function(e){
				
				e.preventDefault()
			}
			
			oRes.ondrop = function(e){
				e.preventDefault()
				var test = e.dataTransfer.getData("title")
				this.innerHTML = test
			}
			
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件拖拽</title>
		<style>
			.drag{
				width: 100px;
				height: 100px;
				border: 1px solid black;
				margin-bottom: 100px;
			}
			
			.result{
				width: 200px;
				height: 200px;
				background: red;
			}
		</style>
	</head>
	<body style="margin: 100px;">
		<div id="drag" class="drag" draggable="true">
			
		</div>
		
		<div id="result" class="result">
			
		</div>
		
		
		
		<script>
		
			var oDrag = document.getElementById("drag")
			var oRes = document.getElementById("result")
			var i = 0
			//开始拖拽
			oDrag.ondragstart = function(){
				console.log(1)
			}
			
			//拖拽中触发事件
			oDrag.ondrag = function(){
//				document.title = i++
			}
			//拖拽结束触发事件
			oDrag.ondragend = function(){
				console.log("结束了..")
			}
			
			//进入元素时触发
			oRes.ondragenter = function(){
				this.style.background = "blue"
			}
			
			oRes.ondragover = function(e){
				document.title = i++
				e.preventDefault()
			}
			
			oRes.ondragleave = function(){
				this.style.background = "red"
			}
			
			oRes.ondrop = function(e){
				e.preventDefault()
				alert(1)
			}
			
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
			}
			.progress{
				width: 200px;
				height: 20px;
				background: #ddd;
				position: relative;
			}
			.info{
				width:0px;
				height: 20px;
				background: darkgreen;
				position: absolute;
				left: 0;
				top: 0;
			}
			
		</style>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
	</head>
	<body style="margin: 200px;">
		<input type="file" id="file" name="file" />
		
		<div class="progress">
			<div class="info" id="info">
			</div>
		</div>
		
		<div id="result">
			
		</div>
		
		<input type="submit" id="btn" />
		
		
		<script>
			var oFlie = document.getElementById("file")
			var oBtn = document.getElementById("btn")
			var oRes = document.getElementById("result")
			var oImg = document.getElementsByTagName("img")
			var oInfo = document.getElementById("info")
			oBtn.onclick = function(){
				
				var fs = oFlie.files[0]
				var reader = new FileReader(fs)
				
				
				reader.onprogress = function(e){
//					console.log(e)
					oInfo.style.width= e.loaded/e.total*200+"px"
					oRes.innerHTML = Math.round((e.loaded/e.total*200)*0.5)+"%"
				}
				
				reader.onload = function(){
//					alert('完成了')
					var data = new FormData()
					data.append("file",fs)
					
//					console.log(data)
					$.ajax({
						type:"post",
						url:"api/test.php",
						async:true,
						data:{
							data:data
						},
						processData:false,
						contentType:false,
						success:function(res){
							console.log(res)
						}
					});
					
					
				}
				
				
				reader.readAsDataURL(fs)
				
			}
			
		</script>
	</body>
</html>

日常代码骗

猜你喜欢