js drag 拖拽google兼容问题

小飞_723
  • 214

drag 将图片拖拽到iframe子页面中,火狐浏览器没问题,但是google浏览器取不到mozSourceNode这个属性
image.png
image.png

下面是js源码

$("#case", parent.document).find("li").each(function() {
    $(this).on("dragstart", function(ev) {//开始拖拽
 var dt = ev.originalEvent.dataTransfer;
 dt.setData('text/plain', ev.target.id);//将拖拽组件ID传入
 });
});
//上传图片拖拽到ifram内组件
magic.Draggable({destId:".upload-drag",dragTag:"li"});
Draggable: function (options){
            var options = options||{};
            var tag = options.dragTag||"li";//目前只支持li
            var onlyName = options.onlyName || "upload_attr";
            var $dest = $(options.destId);//拖拽放入的容器对象
            $dest.on("dragover", function(ev) {
                ev.preventDefault();
                ev.dropEffect = 'move';
                ev.effectAllowed = 'move';
            });
            $dest.on("drop", function(ev) {
                ev.preventDefault();
                var df   = ev.originalEvent.dataTransfer;
                var el   = ev.target;//目标对象
                var ctx  = $(this).get(0);//当前容器
                var item = df.mozSourceNode;
                    //console.log(df);console.log(item);//console.log(ctx);console.log(el);
                    item.removeChild(item.childNodes[0]);
                    item.removeChild(item.childNodes[0]);
                    item.append($(magic.del).get(0));
                var style = item.attributes.getNamedItem('style');
                    style.nodeValue = 'overflow: visible;';
                    item.attributes.setNamedItem( style);
                var image = item.attributes.getNamedItem('orgin-src').nodeValue;

                var platformHtml = '<div class="position-fixed top-left text-danger text-truncate width-150 platform" style="z-index: 10"></div>';
                var fileName = $(item).data('filename');
                var inputHtml = '<input type="checkbox" class="hide" name="platform[]" data-filename="'+fileName+'" value="">';
                var imagehtml = '![]()';
                    item.appendChild($(platformHtml).get(0));
                    item.appendChild($(imagehtml).get(0));
                    item.appendChild($(inputHtml).get(0));
                var isAttr   = ctx.className.indexOf(onlyName) > -1 ? true : false;
                var that    = this;
                if ($(that).children().length>0 && isAttr) return false;

                do {
                    var O = new Image();
                    O.src = image;
                    O.onload = function(){
                        var width  = this.width;
                        var height = this.height;
                        var html   = '<div class="size text-center">'+width+'*'+height+'</div>';
                        item.appendChild($(html).get(0));
                        //
                        if ($(that).children().length>0){//当前容器下有li
                            if(tag === '' || el.nodeName == tag){//当前目标对象的tagName是LI
                                if (el.nextElementSibling){//如果当前对象的下一个兄弟节点存在,那么就将当前拖拽的对象插入到这个兄弟节点的前面
                                    el.parentNode.insertBefore(item,el.nextElementSibling);
                                }else{//兄弟节点不存,那么直接append到容器中
                                    ctx.appendChild(item);
                                }
                            } else {
                                ctx.appendChild(item);
                            }
                        }else{//当前容器下没有li,直接append进这个容器中
                            ctx.appendChild(item);
                        }

                        $(item).on("click","svg.delete", function (i) {
                            helper.doGet('/v1/image/deal/delImage?file='+image);
                            $(item).remove();
                        }).on("dblclick","img", function (i) {
                            helper.view($(this).parents('li.success'));
                        }).on('click','div.size' ,function () {
                            var check = $(this).parent('li').find('input[type=checkbox]').prop('checked') ? false : true;
                            check ? $(this).css('background-color','red') : $(this).css('background-color', '');
                            $(this).parent('li').find('input[type=checkbox]').prop('checked', check);
                        });
                        $(that).parents('.panel').find('.main_img_num').html($(that).children().length);
                    }
                }
                while(el !== ctx && (el = el.parentNode));//当前目标对象不是容器,那么就将当前目标对象的父级节点赋值给当前目标对象
            });
            //$dest.sortable();//JQUERY UI sortable组件
            return (function(){

            })(options);
        },
},
回复
阅读 494
2 个回答
✓ 已被采纳

这个属性是非标准的,不要在生产中用
MDN文档

看你的目的就是获取一个dom,你可以把这个dom的id在拖拽开始时通过dataTransfer.setData("Text", ID)带上,拖拽结束通过id找到dom即可

mozSourceNode 这个看上去就是火狐独有的一个属性。

你得看看有没有sourceNode 或者 webkitSourceNode。。

你知道吗?

宣传栏