jQuery-移动具有斑点背景图像的元素

问题描述

是否可以用jquery移动具有斑点背景图像的元素？

例如，style属性如下：style =“ background-image：url（” blob：http：// localhost / b7e08807-b94f-4448-95db-1702c4508172“）;

当我尝试使用append或insertAfter之后，它在控制台中显示错误消息，指出该文件不存在。

它最初确实存在是因为，当用户在网站上添加图像时，它会显示图像的预览，并将斑点图像添加为背景。

我正在寻找一种方法，要么实际移动元素而不是先删除元素，然后再插入它，要么从blob URL重新创建blob文件。

更新：

我目前用一个div替换另一个div的代码是：

var old_id = $('.media-temp-selected-border').parent().attr('id');
var old_html = $('.media-temp-selected-border').parent().wrap('<p/>').parent().html();
$('.media-temp-selected-border').parent().unwrap();
                
var new_id = $(this).attr('id');
var new_html = $(this).wrap('<p/>').parent().html();
$(this).unwrap();
                
$(old_html).insertAfter('#'+new_id);
$(new_html).insertAfter('#'+old_id);
                
$('.media-temp-selected-border').parent().remove();
$(this).remove();

运行此代码时，它会引发错误消息，表明blob文件不存在。

我也尝试过这种方法：

var original_background_image = $('.media-temp-selected-border').parent().css('background-image');
var original_data_name = $('.media-temp-selected-border').parent().attr('data-name');
var original_data_file = $('.media-temp-selected-border').parent().attr('data-file');
                
$.get(original_data_file).then(function(data) {
    var original_file = new Blob([data],{ type: 'image/jpg' });
                
    var original_img = new Image();
    original_img.src = URL.createObjectURL(original_file);
                
    $(this).css('background-image',original_background_image);
    $(this).attr('data-name',original_data_name);
    $(this).attr('data-file',original_img.src);
});
                
var new_background_image = $(this).css('background-image');
var new_data_name = $(this).attr('data-name');
var new_data_file = $(this).attr('data-file');
                
$.get(new_data_file).then(function(data) {
    var new_file = new Blob([data],{ type: 'image/jpg' });
                
    var new_img = new Image();
    new_img.src = URL.createObjectURL(new_file);
                
    $('.media-temp-selected-border').parent().css('background-image',new_background_image);
    $('.media-temp-selected-border').parent().attr('data-name',new_data_name);
    $('.media-temp-selected-border').parent().attr('data-file',new_img.src);
});

但是我再次收到错误消息，说它不存在。

我最初用于创建Blob图像的代码是：

var file = elem.files[i];

var img = new Image();
img.src = URL.createObjectURL(file);

当用户最初添加图像并且与上面的示例无关时，将调​​用此代码。

之所以这样做，是因为在移动设备上我无法使jQuery Sortable正常工作。

我可以通过使用找到的库然后调用$（'。add-photos'）。addTouch（）使其工作。但这是一个问题，那就是它不允许滑动滚动，因此用户无法向下滚动页面。

我尝试了多种不同的组合来尝试使此功能生效，例如启用/禁用可排序或添加自定义函数以计算延迟或在可排序中使用延迟本身，但是不幸的是，我已经删除了现在尝试的代码。

更新 我决定坚持使用jquery可排序，并添加一个按钮，用户单击该按钮即可打开或关闭可排序。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）