1. 程式人生 > >適合pc端的移動拖拽,分享一下。

適合pc端的移動拖拽,分享一下。

h5新加的特性拖拽事件,但是隻適合PC端哦。不多說了上程式碼

 

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body{
			position: relative;
			margin: 0;
		}
		body:before{
			content: ' ';
			display: table;
		}

		#p3{
			position: absolute;
		}
        #div1{
            width: 100px;
            height: 100px;
            position: absolute;
            top:500px;
            left:500px;
            background: #000;
        }
	</style>
</head>
<body>
	<h1>拖動的源物件可能觸發的事件</h1>
<!-- 	<p class="p1"></p> -->
	<img id="p3" src="qd.png"/>
    <div id="div1"></div>
<script>  
	//事件源p3開始拖動
	var offsetX,offsetY;
    p3.ondragstart=function(e){  
        console.log('事件源p3開始拖動');  
        //記錄剛一拖動時,滑鼠在飛機上的偏移量  
        offsetX= e.offsetX;  
        offsetY= e.offsetY;  
    }  
    //事件源p3拖動中
    p3.ondrag=function(e){  
        console.log('事件源p3拖動中');  
        var x= e.pageX;  
        var y= e.pageY;  
        console.log(x+'-'+y);  
        //drag事件最後一刻,無法讀取滑鼠的座標,pageX和pageY都變為0  
        if(x==0 && y==0){  
            return; //不處理拖動最後一刻X和Y都為0的情形  
        }  
        x-=offsetX;  
        y-=offsetY;  
  
        p3.style.left=x+'px';  
        p3.style.top=y+'px';  
    } 
    // 源物件p3拖動結束
    p3.ondragend=function(){  
        console.log('源物件p3拖動結束');  
    } 
    //源物件被拖動著進入目標物件
    div1.ondragenter = function(){
        console.log('drag enter111111111111111111');
    } 
    //源物件被拖動著懸停目標物件上方
    div1.ondragover = function(e){
        //dragover 事件預設行為:必須觸發drag leave
        e.preventDefault();// 阻止事件的預設行為,使得drop事件可能觸發
        //有個預設行為是必須觸發dragleave
        console.log('drag over');
    } 
     //源物件被拖動著離開了目標物件
    div1.ondragleave = function(){
        console.log('drag leave');
    } 
     //源物件被拖動著目標物件上方被釋放被鬆手
    div1.ondrop = function(){
        console.log('drag drop');
    } 
</script> 
</body>

</html>

  


更多專業前端知識,請上 【猿204