拖拽功能

時間  2019-11-12
標籤 功能 简体版
原文   原文鏈接 
<!DOCTYPE>
<html>
<head>
<meta content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
li{ list-style:none; width:100px; height:30px; background:yellow; margin:10px;}
#div1{ width:100px; height:100px; background:red; margin:200px;}
</style>
<script>
window.onload = function(){
    var aLi = document.getElementsByTagName('li');
    var oDiv = document.getElementById('div1');
    var i = 0;
    //拖拽元素
    for(var i=0;i<aLi.length;i++){
        aLi[i].ondragstart = function(){//ondragstart拖拽前觸發
            this.style.background = 'green';
        };
        aLi[i].ondrag = function(){  //ondrag開始與結束連續觸發
            document.title = i++;
        };
        aLi[i].ondragend = function(){//ondragend拖拽結束後觸發
            this.style.background = 'yellow';
        };
    }
    //目標元素
    oDiv.ondragenter = function(){//拖拽元素進入目標元素(移入)
        this.style.background = 'blue';
    };
    
    oDiv.ondragover = function(ev){//enter和leave之間連續觸發
        //document.title = i++;
        ev.preventDefault();
    };
    oDiv.ondragleave = function(){//拖拽元素離開目標元素(移出)
        this.style.background = 'red';
    };
    
    oDiv.ondrop = function(){//在目標元素上釋放元素,要想觸發drop事件，就 必須在dragover當中阻止默認事件
        alert(123);
    };
    
};
</script>
</head>

<body>
<ul>
    <li draggable="true">a</li>
    <li draggable="true">b</li>
    <li draggable="true">c</li>
</ul>
<div id="div1"></div>
</body>
</html>

解決火狐下的拖拽問題
必須設置dataTransfer對象的setData方法才能夠拖拽除圖片外的其餘標籤javascript

window.onload = function(){
    var oUl = document.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');
    var oDiv = document.getElementById('div1');
    var i = 0;
    for(var i=0;i<aLi.length;i++){
        aLi[i].index = i;
        aLi[i].ondragstart = function(ev){
            var ev = ev || window.event;
            //ev.dataTransfer.setData('name','hello');
            ev.dataTransfer.setData('name',this.index);
            this.style.background = 'green';
        };

        aLi[i].ondragend = function(){
            this.style.background = 'yellow';
        };
    }
    
    oDiv.ondragenter = function(){
        this.style.background = 'blue';
    };
    
    oDiv.ondragover = function(ev){
        ev.preventDefault();
    };
    
    oDiv.ondragleave = function(){
        this.style.background = 'red';
    };
    
    oDiv.ondrop = function(ev){
        //alert( ev.dataTransfer.getData('name') );
        oUl.removeChild( aLi[ev.dataTransfer.getData('name')] );
        for(var i=0;i<aLi.length;i++){
            aLi[i].index = i;
        }
    };
};

dataTransfer下的屬性html

window.onload = function(){
    var oUl = document.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');
    var oDiv = document.getElementById('div1');
    var oImg = document.getElementById('img1');
    var i = 0;
    
    for(var i=0;i<aLi.length;i++){
        aLi[i].ondragstart = function(ev){
            var ev = ev || window.event;  
            ev.dataTransfer.setData('name','hello');
            //設置光標樣式    copy  link copylink conpyMove 
            ev.dataTransfer.effectAllowed = 'link';
            //設置當前拖拽樣式
            ev.dataTransfer.setDragImage(oImg,0,0);
            
        };
        
        aLi[i].ondragend = function(){
            this.style.background = 'yellow';
        };
    }
    oDiv.ondragenter = function(){
        this.style.background = 'blue';
    };
    oDiv.ondragover = function(ev){
        ev.preventDefault();
        
    };
    oDiv.ondragleave = function(){
        this.style.background = 'red';
    };
    oDiv.ondrop = function(ev){
    };
};

 filesjava

<!DOCTYPE>
<html>
<head>
<meta content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>

#div1{ width:200px; height:200px; background:red; margin:100px;}
</style>
<script>
window.onload = function(){
    
    var oDiv = document.getElementById('div1');
    var oUl = document.getElementById('ul1');
    oDiv.ondragenter = function(){
        this.innerHTML = '能夠釋放啦';
    };
    oDiv.ondragover = function(ev){
        ev.preventDefault();
    };
    oDiv.ondragleave = function(){
        this.innerHTML = '將文件拖拽到此區域';
    };
    oDiv.ondrop = function(ev){
        ev.preventDefault();
        var fs = ev.dataTransfer.files;
        
        //alert(fs.length);
        
        //alert( fs[0].type );
        
        for(var i=0;i<fs.length;i++){
            if(fs[i].type.indexOf('image')!=-1){
                //文件對象
                var fd = new FileReader();
                //讀取文件信息
                fd.readAsDataURL( fs[i] );
                //文件讀取成功
                fd.onload = function(){
                    var oLi = document.createElement('li');
                    var oImg = document.createElement('img');
                    //this.result讀取文件數據
                    oImg.src = this.result;
                    oLi.appendChild(oImg);
                    oUl.appendChild(oLi);
                    
                };
            }
            else{
                alert('親，請上傳圖片類型');
            }
        }
    };
};
</script>
</head>
<body>
<div id="div1">將文件拖拽到此區域</div>
<ul id="ul1">
</ul>
</body>
</html>

 

<!DOCTYPE>
<html>
<head>
<meta content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
li{ float:left; width:200px; border:1px #000 solid; margin:10px;}
li img{ width:200px;}
p{ height:20px; border-bottom:1px #333 dashed;}
#div1{ width:600px; border:1px #000 solid; height:300px; clear:both;}
.box1{ float:left; width:200px;}
.box2{ float:left; width:200px;}
.box3{ float:left; width:200px;}
#allMoney{ float:right;}
</style>
<script>

window.onload = function(){
    var aLi = document.getElementsByTagName('li');
    var oDiv = document.getElementById('div1');
    
    var obj = {};
    var iNum = 0;
    var allMoney = null;
    
    for(var i=0;i<aLi.length;i++){
        aLi[i].ondragstart = function(ev){
            
            var aP = this.getElementsByTagName('p');
            ev.dataTransfer.setData('title',aP[0].innerHTML);
            ev.dataTransfer.setData('money',aP[1].innerHTML);
            ev.dataTransfer.setDragImage(this,0,0);
        };
    }
    
    oDiv.ondragover = function(ev){
        ev.preventDefault();
    };
    
    oDiv.ondrop = function(ev){
        ev.preventDefault();
        
        var sTitle = ev.dataTransfer.getData('title');
        var sMoney = ev.dataTransfer.getData('money');
        
        if( !obj[sTitle] ){
            
            var oP = document.createElement('p');
            var oSpan = document.createElement('span');
            oSpan.className = 'box1';
            oSpan.innerHTML = 1;
            oP.appendChild( oSpan );
            var oSpan = document.createElement('span');
            oSpan.className = 'box2';
            oSpan.innerHTML = sTitle;
            oP.appendChild( oSpan );
            
            var oSpan = document.createElement('span');
            oSpan.className = 'box3';
            oSpan.innerHTML = sMoney;
            oP.appendChild( oSpan );
            oDiv.appendChild( oP );
            obj[sTitle] = 1;
        }
        else{
            var box1 = document.getElementsByClassName('box1');
            var box2 = document.getElementsByClassName('box2');
            for(var i=0;i<box2.length;i++){
                if(box2[i].innerHTML == sTitle){
                    box1[i].innerHTML = parseInt(box1[i].innerHTML) + 1;
                }
            }
        }
        
        if(!allMoney){
            allMoney = document.createElement('div');
            allMoney.id = 'allMoney';
        }
        iNum += parseInt(sMoney);
        allMoney.innerHTML = iNum + '￥';
        oDiv.appendChild( allMoney );
    };
    
};

</script>
</head>

<body>
<ul>
    <li draggable="true">
        <img src="img1.jpg" />
        <p>javascript語言精粹</p>
        <p>40￥</p>
    </li>
    <li draggable="true">
        <img src="img2.jpg" />
        <p>javascript權威指南</p>
        <p>120￥</p>
    </li>
    <li draggable="true">
        <img src="img3.jpg" />
        <p>精通javascript</p>
        <p>35￥</p>
    </li>
    <li draggable="true">
        <img src="img4.jpg" />
        <p>DOM編程藝術</p>
        <p>45￥</p>
    </li>
</ul>
<div id="div1">
    <!--<p>
        <span class="box1">1</span>
        <span class="box2">DOM編程藝術</span>
        <span class="box3">45￥</span>
    </p>
    <p>
        <span class="box1">1</span>
        <span class="box2">DOM編程藝術</span>
        <span class="box3">45￥</span>
    </p>
    <div id="allMoney">90￥</div>-->
</div>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程