js drag 拖拽google兼容问题

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

下面是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"></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);

},

},

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

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

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

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

回答

以上是 js drag 拖拽google兼容问题 的全部内容, 来源链接: www.h5w3.com/112752.html

回到顶部