h5-3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" 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(){//开始拖拽
            this.style.background = 'green';
        };
        aLi[i].ondrag = function(){  //开始与结束之间触发，拖拽时停止时也触发，不同于move。
            document.title = i++;
        };
        aLi[i].ondragend = function(){//结束拖拽
            this.style.background = 'yellow';
        };
    }
    
    oDiv.ondragenter = function(){//拖拽的目标控件被进入目标控件时。
        this.style.background = 'blue';
    };
    
    oDiv.ondragover = function(ev){
        //进入和离开目标控件之间连续触发
        //要想触发drop事件（在目标元素上释放鼠标触发），就 必须在dragover当中阻止默认事件
        document.title = i++;
        ev.preventDefault();
    };
    
    oDiv.ondragleave = function(){//拖拽的目标控件被离开目标控件时。
        this.style.background = 'red';
    };
    
    oDiv.ondrop = function(){//在目标元素上释放鼠标触发
        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>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" 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 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].ondrag = function(){  //开始与结束连续触发
            document.title = i++;
        };
        
        aLi[i].ondragend = function(){
            this.style.background = 'yellow';
        };
    }
    
    oDiv.ondragenter = function(){
        this.style.background = 'blue';
    };
    
    oDiv.ondragover = function(ev){
        //enter和leave之间连续触发
        //要想触发drop事件，就 必须在dragover当中阻止默认事件
        //document.title = i++;        
        ev.preventDefault();        
    };
    
    oDiv.ondragleave = function(){
        this.style.background = 'red';
    };
    
    oDiv.ondrop = function(ev){
        //alert(123);
        //alert( ev.dataTransfer.getData('name') );        
        oUl.removeChild( aLi[ev.dataTransfer.getData('name')] );        
        for(var i=0;i<aLi.length;i++){        
            aLi[i].index = i;            
        }        
    };    
};
</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>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" 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 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');//设置数据        
            ev.dataTransfer.effectAllowed = 'link';    //设置拖拽时鼠标样式    
            ev.dataTransfer.setDragImage(oImg,100,20);//设置推拽的时候是一个图片样式，并且鼠标指针在100，20位置        
        };
        
        aLi[i].ondragend = function(){
            this.style.background = 'yellow';
        };
    }
    
    oDiv.ondragenter = function(){
        this.style.background = 'yellow';
    };
    
    oDiv.ondragover = function(ev){
        //enter和leave之间连续触发
        //要想触发drop事件，就 必须在dragover当中阻止默认事件
        //document.title = i++;    
        ev.preventDefault();    
    };
    
    oDiv.ondragleave = function(){
        this.style.background = 'red';
    };
    
    oDiv.ondrop = function(ev){
    };
    
};
</script>
</head>

<body>
<ul>
    <li draggable="true">a</li>
    <li draggable="true">b</li>
    <li draggable="true">c</li>
</ul>
<div id="div1"></div>
<img src="miaov.png" id="img1"/>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" 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');
    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 );//拖一个文件就是第0个
        var fd = new FileReader();
        fd.readAsDataURL( fs[0] );//读取文件
        fd.onload = function(){//读取成功触发onload事件
            alert( this.result );
        };
    };
};
</script>
</head>

<body>
<div id="div1">将文件拖拽到此区域</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" 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 );
        /*if(fs[0].type.indexOf('image')!=-1){
            var fd = new FileReader();
            fd.readAsDataURL( fs[0] );    
            fd.onload = function(){        
                var oLi = document.createElement('li');
                var oImg = document.createElement('img');
                oImg.src = this.result;
                oLi.appendChild(oImg);
                oUl.appendChild(oLi);    
            };
        }
        else{
            alert('亲，请上传图片类型');
        }*/
        
        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');
                    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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" 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);//this是这个li
        };
    }
    
    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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yaowen/p/5358907.html