Блог

Возможно ли переместить элемент с помощью jquery с фоновым изображением большого двоичного объекта?

Например, атрибут style имеет следующий вид: style=»background-image: url(«большой двоичный объект: http:// localhost/b7e08807-b94f-4448-95db-1702c4508172»);

Когда я пытаюсь использовать append или insertAfter, в консоли отображается сообщение об ошибке, в котором говорится, что файл не существует.

Изначально он существовал, потому что, когда пользователь добавляет изображение на веб-сайт, он показывает предварительный просмотр изображения и добавляет изображение большого двоичного объекта в качестве фона.

Я ищу способ либо фактически переместить элемент, а не удалять его, а затем вставлять, либо заново создать файл большого двоичного объекта из URL-адреса большого двоичного объекта.

Обновить:

На данный момент у меня есть код для замены одного 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();
  

Когда я запускаю этот код, он выдает сообщение об ошибке, что файл большого двоичного объекта не существует.

Я также пробовал этот подход:

 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);
});
  

Но снова я получаю сообщение об ошибке, в котором говорится, что оно не существует.

Код, который я использую для создания изображения большого двоичного объекта, в первую очередь:

 var file = elem.files[i];

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

Этот код вызывается, когда пользователь изначально добавляет изображение, и не имеет ничего общего с примерами над ним.

Причина, по которой я это делаю, заключается в том, что на мобильных устройствах я не могу заставить jQuery Sortable работать.

Я могу заставить его работать, используя библиотеку, которую я нашел, а затем вызывая $(‘.added-photos’).addTouch(); но проблема в том, что тогда он не позволит прокручивать прокрутку, поэтому пользователь не может прокручивать страницу вниз.

Я пробовал много разных комбинаций вещей, чтобы попытаться заставить это работать, например, включить / отключить сортировку или добавить пользовательскую функцию для вычисления задержки или использовать саму задержку в сортировке, но, к сожалению, я удалил код, который я пробовал сейчас.

ОБНОВЛЕНИЕ Я решил придерживаться jquery sortable и добавить кнопку, которую пользователь нажимает, чтобы включить или выключить сортировку.