javascript - 关于h5拖拽
巴扎黑
巴扎黑 2017-04-11 11:25:34
[JavaScript讨论组]

有没有h5的大神能帮忙找找问题。。。。。,这个拖拽为什么在谷歌可以用,火狐拖拽不起效果,。还有就是在拖拽的过程中ev.target的id或者什么attr的属性都不能获取嘛?

有大神能帮忙看下嘛(>﹏<)
灰常灰常感谢~~ ( ̄﹏ ̄) 

var tgt=document.getElementsByClassName('biaoqian_content')[0];//被拖区域
    var box=document.getElementsByClassName('biaoqian_guanzhu')[0];//进入区域
    var tu=null,ttt;
    var tu2=document.createElement('img');
    tu2.src='/style/home/images/tuo2.png';
    //拖拽目标事件
    tgt.ondragstart=function(ev){//按下开始时触发
        // ev.target.className='red';
        tuo_tu=ev.target;
        alert($(tuo_tu).attr('class'))
            // alert($(this).attr('cateid'))
        tu=ev.target.cloneNode(true);
        ev.dataTransfer.setData('Text',ev.target.alt);
        ev.dataTransfer.setDragImage(tu2,20,12);
    }
    tgt.ondrag=function(ev){//过程中触发
        
    }
    tgt.ondragend=function(ev){//停止时触发
        
    }
    box.ondragenter=function(ev){//对象进入时触发
        ev.preventDefault();
        box.style.borderColor='red';
    }
    box.ondragover=function(ev){//在投放区移动时触发
        ev.preventDefault();
    }
    box.ondragleave=function(ev){//被拖出区域时触发    
        ev.preventDefault();
        box.style.borderColor='#ccc';
    }
box.ondrop=function(ev){//拖拽到投放区触发
        ev.stopPropagation();
            
        // alert(ev.target.nodeName.toLowerCase())
        // console.log(ev.target)
        // console.log(ttt)
        // console.log(ev.target.nodeName.toLowerCase())
        if(ev.target.nodeName.toLowerCase()=='button'){
            // console.log(ev.target.nodeValue)
            console.log(ttt)
            box.insertBefore(ttt,ev.target.parentNode);
            
        box.style.borderColor='#ccc';
        }else{
            var this_=this;
            
            for (var i = 0; i < $('.biaoqian_guanzhu button').length; i++) {
                if ($('.biaoqian_guanzhu button').eq(i).text()==$(tu).text()){
                    return false
                }
            };
            // console.log(tu.innerHTML)
            // console.log($(tu).attr('class'));
            box.appendChild(tu);
        box.style.borderColor='#ccc';
        }
    }
//拖出去
    //拖拽目标事件
    box.ondragstart=function(ev){//按下开始时触发
        // ev.target.className='red';
        ttt=ev.target;
        console.log(ttt)
        ev.dataTransfer.setData('Text',ev.target.alt);
        ev.dataTransfer.setDragImage(tu2,25,20);
    }
    box.ondrag=function(ev){//过程中触发
        
    }
    box.ondragend=function(ev){//停止时触发
        
    }
    tgt.ondragenter=function(ev){//对象进入时触发
        ev.preventDefault();
    }
    tgt.ondragover=function(ev){//在投放区移动时触发
        ev.preventDefault();
        

    }
    tgt.ondragleave=function(ev){//被拖出区域时触发    
        ev.preventDefault();
    }
    tgt.ondrop=function(ev){
        ttt.remove();
    }    
巴扎黑
巴扎黑

全部回复(0)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号