HTML5拖放事件与购物车案例

最新推荐文章于 2022-12-23 11:35:38 发布

sweetllh

最新推荐文章于 2022-12-23 11:35:38 发布

阅读量2k

点赞数 1

分类专栏： html5 文章标签： html5

本文链接：https://blog.youkuaiyun.com/sweetllh/article/details/76322747

版权

本文详细介绍了HTML5中的拖放事件，包括`draggable`属性、拖放元素及目标元素的各种事件，如`dragstart`、`dragend`、`drop`等。并探讨了拖放事件的执行顺序，以及在Firefox下进行拖放操作的注意事项。通过`dataTransfer`对象设置数据和光标样式，并利用`FileReader`读取拖放文件信息。最后，给出了拖拽删除列表、拖拽购物车和上传图片预览功能的示例应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

l拖放事件
•draggable ：
–设置为true，元素就可以拖拽了
•拖拽元素事件 : 事件对象为被拖拽元素
–dragstart ,拖拽前触发
–drag ,拖拽前、拖拽结束之间，连续触发
–dragend , 拖拽结束触发
•目标元素事件 : 事件对象为目标元素
–dragenter ,进入目标元素触发，相当于mouseover
–dragover ,进入目标、离开目标之间，连续触发
–dragleave ,离开目标元素触发，相当于mouseout
–drop , 在目标元素上释放鼠标触发

<!DOCTYPE html >
<html >
<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(){  //开始与结束连续触发
            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(){
    
        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>

l拖放事件_2
•事件的执行顺序：drop不触发的时候
–dragstart> drag > dragenter > dragover > dragleave >dragend
•事件的执行顺序：drop触发的时候(dragover的时候阻止默认事件)
–dragstart> drag > dragenter > dragover > drop > dragend
•不能释放的光标和能释放的光标不一样

删除拖拽的元素：

<!DOCTYPE html>
<html>
<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>
<scrip

最低0.47元/天解锁文章