js drag 拖拽google兼容问题

Z时代
2024-01-10
分类：技术分享

drag 将图片拖拽到iframe子页面中，火狐浏览器没问题，但是google浏览器取不到mozSourceNode这个属性
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);
},},