h5-3

时间：2023-03-09 23:01:35
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>