JS删除元素的某个属性, 以及拖动的实现 JS

shuke 2022-2-7 793

JS removeAttribute()方法:删除元素的某个属性

var two=document.getElementById("two")

two.removeAttribute("id")

 <div class="content">
        <div id="one" style="background-image: url('../../img/butterfly-frame0.png');" draggable="true"></div>
        <div id="two" draggable="true"></div>
        <div id="three" draggable="true"></div>
    </div>
    <script>
        document.querySelector('.content').addEventListener('dragstart',function(event){
            //获取事件源id属性
            var id=event.target.id;
            //存储数据到事件源中
            event.dataTransfer.setData('id',id);
        });
        document.querySelector('.content').addEventListener('dragover',function(event){
            //阻止默认行为(默认行为为不可放置,阻止后,元素可放置)
            event.preventDefault();
        });
        document.querySelector('.content').addEventListener('drop',function(event){
            //取出事件存储的数据(id值)
            var id=event.dataTransfer.getData('id');
            //获取拖拽目标
            var dragEle=document.querySelector("#"+id);
            //获取原来的背景图(拖拽目标的背景图)
            var bg=dragEle.style.backgroundImage;
            if(bg!=""){
                //设置当前事件源的背景
                event.target.style.backgroundImage=bg;
                //取消拖拽的背景
                dragEle.style.backgroundImage="";
            }
        });
    </script>


最新回复 (0)
全部楼主
返回